Vue2+elementui表格实现拖拽行功能

步骤一：安装 sortablejs 依赖 npm install sortablejs --save

npm install sortablejs --save

步骤二：基础表格代码

 <el-table
            ref="manufacturing"
            row-key="keys"
            :data="form.manufacturing"
            tooltip-effect="dark"
            border
            style="width: 50%"
            :row-class-name="tableRowClassName"
            :header-cell-style="{
              background: '#f9fafc',
              padding: '5px 0',
              color: '#333',
              fontSize: '14px',
              height: '50px',
            }"
            :cell-style="{
              padding: '5px 0',
              fontSize: '14px',
            }"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
              type="index"
              width="50"
              label="序号"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="name" label="工序名称" align="center">
              <template slot-scope="scope">
                <div style="display: flex">
                  <el-select
                    placeholder="请选择"
                    v-model="form.manufacturing[scope.$index].name"
                    filterable
                    remote
                    value-key
                    :remote-method="manufacturListing"
                    style="width: 80%"
                    size="small"
                    @focus="manufacturListingNull"
                    clearable
                  >
                    <el-option
                      v-for="item in manufacturingList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <div class="edit-list">
                    <span
                      @click="(erpFundamentalAdding = true), (sendType = '3')"
                      >新增</span
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              width="170"
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <div style="display: flex">
                  <el-button
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row, 4)"
                    >删除</el-button
                  >
                  <el-button
                    type="primary"
                    @click="addSupplier(4)"
                    v-if="scope.$index + 1 == form.manufacturing.length"
                    >添加</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

效果图：

其中最重要的是

row-key='id'得加上，不然会出现回弹或者排序错乱的情况，这个id必须是唯一的，指的是每一行的id都是唯一且不会重复的，若没有id可以用Math.round()随机数去代替减少重复率，

步骤三，引入下载好的依赖

import Sortable from "sortablejs";

 
data(){ 
form:{
 manufacturing: [
          {
            keys: Math.random().toFixed(4),
            name: "",
            id: "",
          },
        ],
    }
}

步骤四：找到表格dom元素（指的是要拖拽元素的父容器）

 rowDrop() {
      const tbody = this.$refs.manufacturing.$el.querySelector(
        ".el-table__body-wrapper > table > tbody"
      );
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.form.manufacturing.splice(oldIndex, 1)[0];
          _this.form.manufacturing.splice(newIndex, 0, currRow);
        },
      });
}

步骤五，在挂载完成生命周期去触发这个事件

 mounted() {
    this.$nextTick(() => {
      this.rowDrop();
    });
  },

完成以上五步基本就可以实现了，若是不行欢迎留言