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

1、图片

2、安装包

import ElTableDraggable from "el-table-draggable";

3、代码（html）

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作为唯一字段。