el-table 实现行拖拽排序

切记必须使用row-key="id"必须添加，必须添加，必须添加不然会排序错乱

             <el-table 
              ref="multipleTable" 
              row-key="id"
              :data="tableData" @current-change="handleCurrentChange">
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="50"
                ></el-table-column>
                <el-table-column
                  prop="cruisePlace"
                  align="center"
                  label="项目位置"
                  width="500"
                />
               <el-table>

  methods: {
  // 行拖拽
    rowDropInit() {
        // 获取行容器
        /* 1、this.$refs.multipleTable：访问 Vue 组件中名为 multipleTable 的引用，通常用于获取某个子组件或 DOM 元素。
        2、.$el：获取这个引用的根 DOM 元素*/
        const wrapperRow = this.$refs.multipleTable.$el.querySelector(
            ".el-table__body-wrapper tbody"
        );
        const that = this; // 存一份指向
        // 给行容器指定对应拖拽规则
        Sortable.create(wrapperRow, {
            animation: 150, // 设置动画时间
            onEnd({ newIndex, oldIndex }) {
                const newData = [...that.tableData]; // 创建新数组
                const currRow = newData.splice(oldIndex, 1)[0]; // 删除原位置的行
                newData.splice(newIndex, 0, currRow); // 插入到新位置
                that.tableData = newData; // 更新数据
            }
        });
    },
}

  mounted() {
    this.$nextTick(()=>{
       this.rowDropInit();
    })

  },