el-table-draggable拖拽实现表格内容排序

1、图片

2、安装包

import ElTableDraggable from "el-table-draggable";

3、代码（html）

 <el-table-draggable:data="soloTableData"@input="dragInputHandlerSolo"><el-table:data="soloTableData"row-key="id"style="width: 100%":default-sort="{ prop: 'date', order: 'descending' }"height="538"><el-table-columntype="index"label="序号"align="center"width="60"></el-table-column><el-table-columnprop="dismountingSequence"label="拆卸序列"align="center"></el-table-column></el-table></el-table-draggable>

4、代码（script）

      // 装配编号parts: [// "护栏",// "1个烟雾发射装置",// "1组(4个)烟雾发射装置",// "盖板",// "散热盖",// "隔板",// "右齿套",// "左齿套",// "柴油管路",// "高压配电箱电缆",// "冷却系统管路",// "抽尘管路",// "发动机固定螺栓",// "综合传动装置固定螺栓",// "排烟管路",// "动力系统",],// 单人数据列表soloTableData: [// {//   id: 1,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A07->A08->A09->A10->A11->A12->A13->A14->A15",// },// {//   id: 2,//   dismountingSequence://     "A02->A01->A03->A04->A05->A06->A07->A08->A09->A10->A11->A12->A13->A14->A15",// },// {//   id: 3,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A08->A09->A10->A11->A12->A13->A14->A15->A07",// },// {//   id: 4,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A09->A10->A11->A12->A13->A14->A15->A07->A08",// },// {//   id: 5,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A10->A11->A12->A13->A14->A15->A07->A08->A09",// },// {//   id: 6,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A11->A12->A13->A14->A15->A07->A08->A09->A10",// },// {//   id: 7,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A12->A13->A14->A15->A07->A08->A09->A10->A11",// },// {//   id: 8,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A13->A14->A15->A07->A08->A09->A10->A11->A12",// },// {//   id: 9,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A14->A15->A07->A08->A09->A10->A11->A12->A13",// },// {//   id: 10,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A15->A07->A08->A09->A10->A11->A12->A13->A14",// },],

5、代码

    dragInputHandlerSolo(newData) {this.soloTableData = newData;},

6、注意事项

el-table中需添加row-key=“id”，数据中必须有id作为唯一字段。