Elment ui中el-table 实现表格拖拽

Element ui el-table拖拽

拖动排序可对表格行进行拖拽排序

1.下载

npm install sortablejs --save

2.引用

 import Sortable from "sortablejs";

3.表格

4.定义行和列

col: [
        { label: "工序名称", prop: "name" },
        { label: "标准工时", prop: "standardDuration" },
        { label: "前置工序", prop: "preCodeName" },
        { label: "前置工序", prop: "preCodeName" },
        { label: "配置时间", prop: "locTime" },
        { label: "楼层定位", prop: "locFloor" },
      ],
      dropCol: [
        { label: "工序名称", prop: "name" },
        { label: "标准工时", prop: "standardDuration" },
        { label: "前置工序", prop: "preCodeName" },
        { label: "前置工序", prop: "preCodeName" },
        { label: "配置时间", prop: "locTime" },
        { label: "楼层定位", prop: "locFloor" },
      ],

5.method方法

// 行拖拽
    rowDrop() {
      this.$nextTick(() => {
        this.sortable1 = Sortable.create(
          document.querySelector(".form_table .el-table__body-wrapper tbody"),
          {
            handle: ".drag-btn",
            onEnd: ({ newIndex, oldIndex }) => {
              this.formChildTable.splice(
                newIndex,
                0,
                this.formChildTable.splice(oldIndex, 1)[0]
              );
              var newArray = this.formChildTable.slice(0);
              this.formChildTable = [];
              this.$nextTick(function () {
                this.formChildTable = newArray;
              });
            },
          }
        );
      });
    },

6.调用

this.rowDrop();

 

希望读到这篇文章会对你有帮助~，有帮助请留下一个赞(*╹▽╹*)

                                                                ——————来自李易峰的小粉丝，凡凡同学