通过SortableJS实现elementUItable拖动效果

背景

目前elmenetUI的表格是不支持拖动的，但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

网上大部分方案如下：

• SortableJS + 原生table
• SortableJS + 原生table + elementUI样式
• 使用vueDraggable组件：https://github.com/SortableJS...

直接操作elementUI的table组件较少，记录一下。

实施方案

• 引入SortableJS

  npm install sortableJS --save

• 创建表格组件，需要注意的是，必须设置row-key属性，否则在拖动展示时，会变成乱序

  • template部分

  • data部分

    data() {
        return {
          tableData: [
            {
              id: "1",
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              id: "2",
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
              id: "3",
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
              id: "4",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄"
            }
          ]
        };
      },

• 配置拖动操作

  • 引入sorable

    import Sortable from "sortablejs";

  • 初始化sorable，并配置拖动事件

    每次拖动的onEnd部分，通过index来splice来截取行，添加行，来更新data。

    mounted() {
        this.rowDrag();
      },
      methods: {
        rowDrag() {
          const tbody = document.querySelector(".el-table__body-wrapper tbody");
          const that = this;
          Sortable.create(tbody, {
            onEnd({ newIndex, oldIndex }) {
              const currentRow = that.tableData.splice(oldIndex, 1)[0];
              that.tableData.splice(newIndex, 0, currentRow);
            }
          });
        }
      }

注意事项

• 如果没有设置row-key，拖动后会乱序
• 建议可以设置两个tableData，tableData 和 tableDataCopy。table用于展示，每次拖动后修改tableDataCopy。这样不影响拖动的展示效果，也可以实现拖动的数据处理。再某些特殊表格拖动时，如果修改的是同一个tableDate，可能会出现一些异常。
• 一个页面如果有多个表格，在拖动方法的时候需要注意，不建议有多个表格。

更多

• sortableJS的更多配置见官网：http://www.sortablejs.com/opt...

• 完整代码：