Element ui 表格拖拽排序

首先引入

import Sortable from 'sortablejs';

mounted () {
    // this.setSort();
    this.rowDrop();

  },
  methods: {
    rowDrop () {

      const tbody = this.$refs.dragRelationTable.$el.querySelectorAll('.el-table__body-wrapper tbody');
      // const _this = this;
      Sortable.create(tbody, {
        // ghostClass: 'sortable-ghost',
        setData: function (dataTransfer) {
          dataTransfer.setData('Text', '');
        },
        onEnd: ({newIndex, oldIndex}) => {
          // setTimeout(() => {

          const currRow = this.tableDataList.splice(oldIndex, 1)[0];
          this.tableDataList.splice(newIndex, 0, currRow);
          this.tableDataList = this.tableDataList.filter(({ adId }) => adId !== 0);
          this.sortString = '';
          this.tableDataList.forEach((item, index) => {
            this.sortString += item.adId + ':' + (index + 1) + ',';
            item.adId = (index + 1);
          });

        }
      });
    }
}

最重要的一点就是一定要加上row-key 属性

el-table.relation-style.mt(
      :data="tableDataList"
      ref="dragRelationTable"
      class="dragRelationTable"
      border
      row-key="googsName"
    )