element ui table + sortablejs实现拖拽

前言

element ui table + sortablejs 实现表格行列拖拽

安装SortableJS

npm install sortableJS --save

HTML

<template>
  <el-table :data="tableData" class="drag" row-key="id">
    <el-table-column
      v-for="(item, index) in col"
      :key="`col_${index}`"
      :prop="dropCol[index].prop"  // 不能直接用item.prop,会乱序
      :label="item.label"
    ></el-table-column>
  </el-table>
</template>

JS

<script>
  import Sortable from 'sortablejs';
  export default {
    data() {
      return {
        col: [
          {
            label: '姓名',
            prop: 'name',
          },
          {
            label: '地址',
            prop: 'address',
          },
          {
            label: '日期',
            prop: 'date',
          },
        ],
        dropCol: [
          {
            label: '姓名',
            prop: 'name',
          },
          {
            label: '地址',
            prop: 'address',
          },
          {
            label: '日期',
            prop: 'date',
          },
        ],
        tableData: [
          {
            id: '1',
            date: '2016-04-04',
            name: '张三',
            address: '上海',
          },
          {
            id: '2',
            date: '2018-05-05',
            name: '李四',
            address: '杭州',
          },
          {
            id: '3',
            date: '2019-06-06',
            name: '王五',
            address: '北京',
          },
          {
            id: '4',
            date: '2020-07-07',
            name: '赵六',
            address: '深圳',
          },
        ],
      };
    },
    mounted() {
      this.rowDrop();
      this.columnDrop();
    },
    methods: {
      //行拖拽
      rowDrop() {
        //添加了一个drag类名，有利于选中具体要拖拽的表格
        const tbody = document.querySelector('.drag .el-table__body-wrapper tbody');
        const _this = this;
        Sortable.create(tbody, {
          ghostClass: 'sortable-ghost', //占位符样式，样式需要加！important，写在elementui.scss样式文件里
          dragClass: 'sortable-drag',
          chosenClass: 'sortable-chosen', //选中样式
          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);
          },
        });
      },
    },
  };
</script>

注意点

1、el-table必须设置row-key属性，绑定唯一值，否则在拖动展示时，会变成乱序
2、一个页面如果有多个表格，需要进行拖动的表格可以添加唯一类名或者id来进行区分
3、建议可以设置两个tableData，tableData 和 tableDataCopy。table用于展示，
每次拖动后修改tableDataCopy。这样不影响拖动的展示效果，也可以实现拖动的数据处理。
在某些特殊表格拖动时，如果修改的是同一个tableDate，可能会出现一些异常。