el-table表格拖拽换顺序

1. 安装插件

npm install sortablejs --save

2. 引用

import Sortable from 'sortablejs'

3. 使用

mounted() {
   this.initSort();
},
methods: {
    initSort() {
      // tableData 是上边el-table数据
      if (this.tableData.length) {
        const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
        if (el) {
          // 根据具体需求配置options配置项
          new Sortable(el, {
            onEnd: (evt) => { // 监听拖动结束事件
              // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
              // 下面将拖拽后的顺序进行修改
              const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
              this.tableData.splice(evt.newIndex, 0, currRow)
            }
          })
        }
      }
    },
}