element 拖拽更改表格行和列顺序_elementui 列表拖动改变顺序

---

前言

使用拖拽的方式更改element 表格行和列顺序，并对el-table表格进行封装。

关键插件：sortablejs

一、创建DropTable组件

<template>
  <el-table
    :data="tableData"
    class="elementTable"
    border
    row-key="id"
    align="left"
  >
    <el-table-column
      v-for="(item, index) in col"
      :width="item.width"
      :key="`col_${index}`"
      :label="item.label"
    >
      <template slot-scope="scope">
        <span v-if="!dropCol[index].handle">{{
          scope.row[dropCol[index].prop]
        }}</span>
        <span v-if="dropCol[index].handle">
          <span v-for="(handle, index) in dropCol[index].handleList">
            <GButton
              :label="handle.label"
              :key="index"
              class="mr5"
              type="txt"
              @click="handleClick(handle, scope.row)"
            ></GButton>
          </span>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [],
      dropCol: [],
    };
  },
  props: [
    "tableCol", //表头数据
    "tableData", //数据源
  ],
  watch: {
    tableCol: () => this.colSet(),
  },
  mounted() {
    this.colSet();
    // 阻止默认行为
    document.body.addEventListener("drop", (event) => {
      event.preventDefault();
      event.stopPropagation();
    });
    this.rowDrop();
    this.columnDrop();
  },
  methods: {
    //设置表头
    colSet() {
      this.col = this.tableCol ? cloneDeep(this.tableCol) : [];
      this.dropCol = this.tableCol
        ? cloneDeep(this.tableCol)
        : [];
    },
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        },
      });
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
        },
      });
    },
    //按钮点击
    handleClick(handle, row) {
      this.$emit(handle.back, row);
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

二、使用

代码如下（示例）：

<template>
  <div>
    <DropTable
      @handleEdit="handleEdit"
      @handleDel="handleDel"
      :tableData="tableData"
      :tableCol="tableCol"
    ></DropTable>
  </div>
</template>
<script>
import DropTable from "../commponents/DropTable/DropTable.vue";
export default {
  components: {
    DropTable,
  },
  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 弄",
        },
      ],
      tableCol: [
        {
          label: "ID", //显示的标题
          prop: "id", //字段名
          width:'120px',//宽度
          handle: false, //是否是操作栏
          handleList: [], //操作按钮
        },
        {
          label: "日期", //显示的标题
          prop: "date", //字段名
          handle: false, //是否是操作栏
          handleList: [], //操作按钮
        },
        {
          label: "名称", //显示的标题
          prop: "name", //字段名
          handle: false, //是否是操作栏
          handleList: [], //操作按钮
        },
        {
          label: "地址", //显示的标题
          prop: "address", //字段名
          handle: false, //是否是操作栏
          handleList: [], //操作按钮
        },
        {
          label: "操作", //显示的标题
          prop: "operate", //字段名
          handle: true, //是否是操作栏
          handleList: [ //操作按钮,结构如下
            {
              label: "编辑", //操作名称
              back:'handleEdit', //该操作的事件
            },
            {
              label: "删除",
              back:'handleDel',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleEdit(row){
      console.log('编辑',row)
    },
    handleDel(row){
      console.log('删除',row)
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

---

三、最终结果

拖拽前：

拖拽后：