Vue el-table实现拖曳调整顺序

1661151235812

el-table 想要实现拖曳调整表格顺序的功能，需要借助第三方插件Sortablejs来实现

首先需要安装：

npm install --save sortablejs

在界面中调用：

import Sortable from 'sortablejs'

el-table部分：

其中 row-key 是必须的并且是唯一的，class-name="allowDrag"可以在每个字段上都加上

<el-table
  border
  :data="strategyList"
  ref="strategyTable"
  row-key="id"
  height="400"
>
  <el-table-column label="执行顺序" align="center" type="index" width="80px" class-name="allowDrag"/>
  <el-table-column label="策略标识" align="center" prop="strategyMark" min-width="80px" class-name="allowDrag"/>
  <el-table-column
    label="策略名称"
    align="center"
    prop="strategyName"
    :show-overflow-tooltip="true"
    class-name="allowDrag"
  />
  <el-table-column
    label="关联载荷"
    align="center"
    prop="loadName"
    :show-overflow-tooltip="true"
    class-name="allowDrag"
  />
el-table>

方法部分：

methods: {
   // 拖曳表格
   dragTable() {
     const el = this.$refs.strategyTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
     const sortable = Sortable.create(el, {
       handle: '.allowDrag',
       onEnd: evt => {
         const targetRow = this.strategyList.splice(evt.oldIndex, 1)[0]
         this.strategyList.splice(evt.newIndex, 0, targetRow)
         // 自己的业务逻辑部分
         for (let index in this.strategyList) {
           this.strategyList[index].sort = parseInt(index) + 1
           this.strategyList[index].queue = parseInt(index) + 1
         }
       }
     })
   }
}

调用：

如果是正常界面，在mounted中调用

mounted() {
	this.dragTable()
}

如果是子组件，在子组件打开时并且子组件加载完成后调用：

watch: {
  sortData: {
    handler(n, o) {
      if (this.sortData.open) {
        this.getList()
        this.$nextTick(() => {
          this.dragTable()
        })
      }
    },
    deep: true
  }
},