使用sortablejs实现表格拖拽排序

拖动红色区域可以实现行排序

1.下载

npm install sortablejs --save

2.引用

 import Sortable from "sortablejs";

3.el-table使用拖拽

<el-table
        :data="columnTableData"
        :header-cell-style="{background:'#F5F7FA'}"
        style="width: 100%"
        size="small"
        row-key="id"
        ref="columnTable"
      >
        <el-table-column label="拖动" width="50px">
          <template slot-scope="scope">
            <div class="drag">
              <i class="fa fa-arrows" aria-hidden="true"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="列名"></el-table-column>
        <el-table-column prop="field" label="字段"></el-table-column>
</el-table>

4.拖拽后改变数据

  created() {
    this.$nextTick(() => {
      this.columnDataDrag();
    });
  },
  columnDataDrag() {
      if (this.$refs.columnTable) {
        const el1 = this.$refs.columnTable.$el.querySelectorAll(
          ".el-table__body-wrapper > table > tbody "
        )[0];

        Sortable.create(el1, {
          disabled: false, // 拖拽不可用? false 启用
          ghostClass: "sortable-ghost", //拖拽样式
          animation: 150, // 拖拽延时，效果更好看
          handle: ".drag", // 设置拖拽点
          onEnd: e => {
            // 拖拽结束时的触发
            let arr = this.columnTableData; // 获取表数据
            arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理，获取最新的表格数据
            this.$nextTick(function() {
              this.columnTableData = arr;
              // console.log("columnTableData:", this.columnTableData);
            });
          }
        });
      }
    }