解决 element + sortablejs 实现表格拖拽 顺序出现混乱问题

最根本问题就是table表格的row-key问题
直接上代码

<template>
  <div>
    <el-table :data="tableData" style="width: 60%;margin: auto;margin-top: 100px" class="project-auth-emp-list-table" row-key="id" border>
      <el-table-column label="日期" width="180" :key="Math.random()">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180" :key="Math.random()">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" :key="Math.random()">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拖拽" width="50">
        <template>
          <i class="el-icon-rank f18 poi"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  const sortablejs = () =>
    import( /* webpackChunkName: 'async_vendors/sortablejs' */ 'sortablejs');
  export default {
    name: '',
    data() {
      return {
        sortablejs,
        empListTable: null,
        tableData: []
      }
    },
    mounted() {
      this.getDataValue();
    },
    methods: {
      getDataValue () {
        this.tableData = [{
          date: '2016-05-02',
          name: '1',
          id: 1,
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '2',
          id: 2,
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '3',
          id: 3,
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '4',
          id: 4,
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        this.$nextTick(() => {
          this.initSortable();
        })
      },
      /**
       * 表格拖拽初始化
       */
      async initSortable() {
        let vm = this;
        let Sortable = await sortablejs();
        function createSortableInstance(el, block) {
          return Sortable.default.create(el, {
            ghostClass: 'sortable-ghost', //拖拽样式
            animation: 60, // 拖拽延时，效果更好看
            setData(dataTransfer) {
            	dataTransfer.setData('Text', '');
            },
            disabled: false, // 是否开启拖拽
            group: { // 是否开启跨表拖拽
                pull: false,
                put: false
            },
            onEnd: ({
              newIndex,
              oldIndex
            }) => {
              let targetRow = vm[block].splice(oldIndex, 1)[0];
              vm[block].splice(newIndex, 0, targetRow);
              console.log(vm[block])
            }
          })
        }
        let elMain = document.querySelector(
          '.project-auth-emp-list-table > .el-table__body-wrapper > table > tbody'
        );
        this.empListTable = createSortableInstance(elMain, 'tableData');
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
    destroyed () {
      this.empListTable = null;
    }
  }
</script>

<style lang="scss" scoped>

</style>

最最最重要的就是el-table上面必须要添加
row-key的值是在获取到的列表数据中必须具备唯一的值才不会导致拖拽顺序紊乱！！！！！