Elment ui中el-table 实现表格拖拽

原创已于 2022-05-11 18:00:58 修改 · 6.8k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #npm

于 2022-03-01 15:10:57 首次发布

本文介绍了如何在Element UI的el-table组件中实现表格行的拖拽排序功能。通过安装和引入Sortable.js库，定义表格行和列，并在Vue.js的方法中调用rowDrop()来实现拖动排序功能。

Element ui el-table拖拽

拖动排序可对表格行进行拖拽排序

1.下载

npm install sortablejs --save

2.引用

import Sortable from "sortablejs";

3.表格

<el-table
              ref="formTable"
              :data="formChildTable"
              class="form_table"
              border
              fit
              highlight-current-row
            >
              <el-table-column label="拖动排序" width="100" align="center">
                <svg-icon icon-class="grid" class="drag-btn" />
              </el-table-column>
              <el-table-column label="工序名称" width="120" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.name"
                    :disabled="!editOrCheckFlag"
                  />
                </template>
              </el-table-column>
              <el-table-column label="标准工时" width="90" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.standardDuration"
                    :disabled="!editOrCheckFlag"
                  />
                </template>
              </el-table-column>
              <el-table-column label="前置工序" width="160" align="center">
                <template slot-scope="scope">
                  <span
                    class="pre_input"
                    @click="preCodeClick(scope.row, scope.$index)"
                    >{{ scope.row.preCodeName }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column label="配置时间" width="120" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.locTime"
                    :disabled="!editOrCheckFlag"
                  />
                </template>
              </el-table-column>
              <el-table-column label="楼层定位" width="95" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.locFloor"
                    :disabled="!editOrCheckFlag"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDeleteChild(scope.row, scope.$index)"
                    :disabled="!editOrCheckFlag"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

4.定义行和列

col: [
        { label: "工序名称", prop: "name" },
        { label: "标准工时", prop: "standardDuration" },
        { label: "前置工序", prop: "preCodeName" },
        { label: "前置工序", prop: "preCodeName" },
        { label: "配置时间", prop: "locTime" },
        { label: "楼层定位", prop: "locFloor" },
      ],
      dropCol: [
        { label: "工序名称", prop: "name" },
        { label: "标准工时", prop: "standardDuration" },
        { label: "前置工序", prop: "preCodeName" },
        { label: "前置工序", prop: "preCodeName" },
        { label: "配置时间", prop: "locTime" },
        { label: "楼层定位", prop: "locFloor" },
      ],

5.method方法

// 行拖拽
    rowDrop() {
      this.$nextTick(() => {
        this.sortable1 = Sortable.create(
          document.querySelector(".form_table .el-table__body-wrapper tbody"),
          {
            handle: ".drag-btn",
            onEnd: ({ newIndex, oldIndex }) => {
              this.formChildTable.splice(
                newIndex,
                0,
                this.formChildTable.splice(oldIndex, 1)[0]
              );
              var newArray = this.formChildTable.slice(0);
              this.formChildTable = [];
              this.$nextTick(function () {
                this.formChildTable = newArray;
              });
            },
          }
        );
      });
    },

6.调用