表格实现拖拽排序

row-key！！！！！！！！！
<el-table :data="dataList" ref="table" :height="pageContentHeight - 71" row-key="processingTypeId" border size="medium" v-loading="listLoading">
        <el-table-column label="序号" width="70" type="index" align="center" fixed="left" />
        <el-table-column label="类型名称" prop="typeName" min-width="150" show-overflow-tooltip />
        <el-table-column label="创建时间" prop="createTime" min-width="150" show-overflow-tooltip />

        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" style="color: red" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

//！！！！！！！！！！引入
  import Sortable from 'sortablejs'
  var sortableObect = null

	mounted() {
      this.init()
      this.rowDrop()
    },
    methods: {
      rowDrop() {
        const tbody = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        let _this = this
        sortableObect = Sortable.create(tbody, {
          animation: 300,
          onEnd: (e) => {
                //this.dataList表格数据
            const targetRow = this.dataList.splice(e.oldIndex, 1)[0]
            this.dataList.splice(e.newIndex, 0, targetRow)
            _this.sortProcessingType()//拖拽完成调用保存接口
            //！！！！！调用完成接口成功后-清除 sortableObect.destroy()
          },
        })
      },
      //   表格排序
      async sortProcessingType() {
        let arr = []
        this.dataList.forEach((item) => {
          arr.push(item.processingTypeId)
        })
        const res = await onlineReservationInfo.sortProcessingType(arr)
        if (res.success) {
          sortableObect.destroy()
          this.fetchData()
          this.$message.success('排序成功')
        } else {
          this.$message.error(res.msg)
        }
      },}

一、安装插件

npm i -S vuedraggable

• el-table必须指定row-key，row-key必须是唯一的，不然会出现排序不对的情况。
• 列拖拽

  // 列拖拽
  			columnDrop() {
  				// 要侦听拖拽响应的DOM对象
  				const wrapperTr = document.querySelector('.el-table__body-wrapper tr');
  				const that = this;
  				Sortable.create(wrapperTr, {
  					animation: 180,
  					delay: 0,
  					// 结束拖拽后的回调函数
  					onEnd: evt => {
  						console.log('拖动了列（index）：');
  						const oldItem = that.dropCol[evt.oldIndex];
  						that.dropCol.splice(evt.oldIndex, 1);
  						that.dropCol.splice(evt.newIndex, 0, oldItem);
  					}
  				})
  			}