河豚随心记（五）vue项目使用element-ui el-table 实现拖拽排序

前言

使用一个强大的第三方js库sortable.js来实现

步骤

1.直接npm安装npm install sortablejs --save
2.装完之后在要使用的页面引入import Sortable from 'sortablejs'
3.在el-table标签挂载完成后使用sortablejs库，我这里是在mounted里面，因为我的el-table是页面初始化的时候挂载的：

<el-table  ref="dragTable" row-key="filedId" :data="tableData">
            <el-table-column
              label=""
              width="60"
              align="center"
              class-name="allowDrag"
              >
              <template slot-scope="scope">
                <div class="flex-box-between-column drag-btn">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="序号" type="index" align="center" width="50" />
            <el-table-column label="项目名称" align="center" prop="fieldName"/>
            <el-table-column label="项目类型" align="center" prop="dataType"></el-table-column>
            
</el-table>

mounted() {
    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
    const sortable = Sortable.create(el, {
      handle: ".allowDrag",
      onEnd: evt => {
        const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
        this.tableData.splice(evt.newIndex, 0, targetRow);
        for (let index in this.tableData) {
          this.tableData[index].sort = parseInt(index) + 1;
        }
      }
    });
  },

这样一个最基础可拖拽的el-table就实现了，这里解释一下代码里面的几个变量的使用

html标签

首先el-table标签里要加上ref属性，方便js选中;
row-key要为表格数据的唯一标识，且一定要有值，如果没有的话拖拽功能会异常;
然后是设置拖拽识别列，即长按哪一列的时候可以进行拖拽，我这里是新增了一个拖拽按钮列：

你们也可以设置成其他列或者直接设置为序号列，设置拖拽识别列：给el-table-column标签加个属性class-name="allowDrag"即可

JS部分

el就是选中的整个表格的tbody了：

handle的值就是刚刚class-name属性里面的值，注意是类名，所以前面要加个点，.allowDrag;
onEnd是拖拽后鼠标放开事件，把this.tableData换成你们自己的表格数据源；
我这里数据源是用字段sort排序的把.sort改成你们表格数据源的排序字段名即可。
其他不用改，按照以上改完即可使用。