vue+element-ui 表格实现拖动排序(行排序)

项目的需求是能够对element-ui中的e-table进行拖拽行排序。

这里使用到Sortable.js插件，Sortable是一款轻量级的拖动排序列表的js插件，特点：体积小、功能强大。官方Demo：SortableJS

使用步骤：

1、安装：

npm install sortablejs --save

2、引用：在需要用到Sortable的 *.vue 中的script部分引用。也可以在main.js中入注册到Vue的根实例中。

  import Sortable from 'sortablejs'

3、template中引用

<template>
  <div class="app-container">
    <el-table :data="list" ref="listTable" row-key="id" width="100%">
      <el-table-column label="序号" prop="id" align="center" width="50">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" min-width="180" />
    </el-table>
  </div>
</template>

4、行排序

<script>
  // 引用 Sortable
  import Sortable from 'sortablejs'
  export default {
    data() {
      return {
        list: []
      }
    },
    mounted() {
      this.rowDrop();
    },
    methods: {
      //行拖拽,排序方法
      rowDrop() {
        const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost',
          setData: function(dataTransfer) {
            dataTransfer.setData('Text', '')
          },
          onEnd: evt => {
            const targetRow = this.list.splice(evt.oldIndex, 1)[0];
            this.list.splice(evt.newIndex, 0, targetRow);
          }
        });
      },
    }
</script>

注意：el-table中必须设置 row-key="id"，否则会导致排序不成功。原因：由于vue加载循环机制，在进行删除时，一定要添加key，跟使用v-for循环一样都需要添加绑定key。