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

1、图片

2、安装包

javascript 复制代码

import ElTableDraggable from "el-table-draggable";

3、代码（html）

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-column
                        type="index"
                        label="序号"
                        align="center"
                        width="60"
                      ></el-table-column>
                      <el-table-column
                        prop="dismountingSequence"
                        label="拆卸序列"
                        align="center"
                      >
                      </el-table-column>
                    </el-table>
                  </el-table-draggable>

4、代码（script）

javascript 复制代码

      // 装配编号
      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、代码

javascript 复制代码

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

6、注意事项

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