el-table 使用sortablejs 实现拖拽排序

遇到表格拖拽排序的需求，element ui 表格没有自带的拖拽排序的功能，需要借助第三方插件Sortablejs来实现。

1.安装

npm install sortablejs --save

2.在需要实现表格拖拽的 .vue 文件中引入 sortablejs： 

import Sortable from 'sortablejs'

3.示例

 <template>
    <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column width="60">
      <template :slot-scope="scope">
        <i class="el-icon-s-operation cursor-pointer"></i>
      </template>
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  </template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
      }],
    };
  },
  mounted() {
    this.drag();
  },
  methods: {
    drag() {
      const el = document.querySelector('.el-table__body-wrapper > table > tbody');
      Sortable.create(el, {
        disabled: false, // boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
        handle: '.el-icon-s-operation', // 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
        animation: 150, // 拖拽延时
        onEnd: (e) => { // 拖拽结束时的触发
          const arr = this.tableData; // 获取表数据
          arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理，获取最新的表格数据
          this.$nextTick(() => {
            this.tableData = arr;
            console.log(this.tableData);
          });
          // 调用后端接口将排序结果实时保存
          this.$api.saveSort(arr).then(() => {
            this.$message.success('Sorted successfully');
          }).catch(() => {
            this.$message.error('Failed to save sort');
          });
        },
      });
    },
  },
};
</script>

options 是 sortable 配置项，更多配置详情查看Sortable 配置文档