vue+element ui实现表格拖拽功能

需求：vue框架中，使得el-table实现拖拽变更表格顺序的功能。

方法：引入插件Sortable.js，其中文API可参考 Sortable.js中文网

首先利用npm引入插件sortablejs，如图

 然后直接上代码，api简单易懂易上手：

<template>
  <div>
    <!-- 表格 -注意：table必须有唯一key值供拖拽，必须设置row-key拖拽才有效 -->
    <el-table :data="tableDatatest" border class="t1" row-key="id" highlight-current-row>
      <!-- 用于拖拽的列 -->  
      <el-table-column prop="id" type="index" label="id" align="center" class-name="handle">
        <i class="el-icon-rank" style="font-size: 14px;" />
      </el-table-column>
      <!-- 普通数据列 -->  
      <el-table-column prop="title" label="title" align="center" />
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs' // 引入插件
export default {
  data() {
    return {
      // 表格数据
      tableDatatest: [
        { id: 0, title: 'title1' }, { id: 1, title: 'title2' }, 
        { id: 2, title: 'title3' }, { id: 3, title: 'title4' }
      ]
    }
  },
  mounted() {
    // 允许拖拽（注意：在created中无效）
    this.sortable('t1', 'tableDatatest') // 参数分别为table的class名称，table的数据data
  },
  methods: {
    // 拖拽table test
    sortable(className, targetName) {
      const table = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
      const that = this
      Sortable.create(table, {
        handle: '.handle',
        // 拖拽完毕后触发
        onEnd({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) return
          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
        }
      })
    }
  }
}
</script>