vue2实现element表格拖拽功能

1. 安装sortablejs

npm install sortablejs --save

安装完成之后需要在你使用界面中引入即可

import Sortable from 'sortablejs'

2. 表格中使用sortablejs

<el-table
      ref="sortTable"
      :data="tableData"
      :loading="loading"
      @row-click="handleClick"
      style="padding: 12px 12px 0 12px"
      row-key="agencyName"
    >
      <!-- 表格主体部分 -->
      <template>
        <el-table-column
          align="left"
          label="序号"
          type="index"
          width="80"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{
              scope.$index + 1 + (listQuery.pageNum - 1) * listQuery.pageSize
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="agencyName"
          label="单位名称"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="province"
          label="省份"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="creatTime"
          label="创建时间"
          :show-overflow-tooltip="true"
        />
      </template>
    </el-table>

其中需要给table增加ref和 row-key，row-key的值需要为唯一值

3. 表格排序

sortTable() {
      let _this=this;
      const tbody = _this.$refs.sortTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      Sortable.create(tbody, {
        animation: 300,
        onEnd: e => {
          console.log(e)
          //e.oldIndex为拖动一行原来的位置，e.newIndex为拖动后新的位置
          const targetRow = _this.tableData.splice(e.oldIndex, 1)[0];
          _this.tableData.splice(e.newIndex, 0, targetRow);
          //拖动行的数据
          let dragId = _this.tableData[e.newIndex].agencyName; 
          console.log(_this.tableData)
        }
      });
    },

然后在表格列表获取之后调用该函数就可以了。

4. 方法介绍

onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件
	console.log('onAdd.foo:', [evt.item, evt.from])
},
onUpdate: function (evt) { // 拖拽更新节点位置发生该事件
  	console.log('onUpdate.foo:', [evt.item, evt.from])
},
onRemove: function (evt) { // 删除拖拽节点的时候促发该事件
 	 console.log('onRemove.foo:', [evt.item, evt.from])
},
onStart: function (evt) { // 开始拖拽出发该函数
 	 console.log('onStart.foo:', [evt.item, evt.from])
},
onSort: function (evt) { // 发生排序发生该事件
  	console.log('onUpdate.foo:', [evt.item, evt.from])
},
onEnd ({ newIndex, oldIndex }) { // 结束拖拽
 	 let currRow = _this.tableData.splice(oldIndex, 1)[0]
 	 _this.tableData.splice(newIndex, 0, currRow)
}