element-plus+vue-draggable-plus实现表格行拖拽

基于vue3，用 element-plus + vue-draggable-plus 实现表格行拖拽

vue-draggable-plus的官网：https://vue-draggable-plus.pages.dev/guide/

为什么使用vue-draggable-plus：
vue-draggable-plus可以在vue3的项目中使用

使用：
1.安装

npm install vue-draggable-plus

 

2.使用
组件的方式，引入vue-draggable-plus

 import { VueDraggable } from 'vue-draggable-plus'

 

使用了vue-draggable-plus后的代码：

<VueDraggable :animation="150" v-model="props.row.itemList" target="tbody" @start="onStart(props.row.itemList)" @end="onEnd(props.row.itemList,props.row.id)">
  <el-table :data="props.row.itemList" :border="false">
    <el-table-column label="序号" width="80">
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="materialName" label="物料名称" width="200" />
    <el-table-column prop="purchaseCategoryName" label="物料分类" width="400" />
    <el-table-column prop="materialUnit" label="物料单位" width="100" />
    <el-table-column prop="materialNorms" label="物料规格" width="100" />
    <el-table-column label="操作" align="center" min-width="120px">
      <template #default="scope">
        <el-button
          link
          type="danger"
          @click="deleteTemplateItem(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</VueDraggable>

 

在el-table外层包装一个VueDraggable，并且指定目标容器为tbody标签，即可实现表格行拖动。