Vue elementUI 实现表格行列拖拽

一、前言

elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。

• git地址
• 中文网

Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports Meteor, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.

首先需要安装Sortable.js

npm install sortablejs --save

然后引用

import Sortable from ‘sortablejs’

需要注意的是element table务必指定row-key，且row-key必须是唯一的，如ID，不然会出现排序不对的情况。

二、示例代码

<template>
  <div style="width:800px">
    <el-table :data="tableData"
      border
      row-key="id"
      align="left">
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ]
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        group : {
           name : "words",
           pull : true,
           put : true
        },
        animation : 150, //动画参数
        onAdd : function(evt) {//拖拽时候添加有新的节点的时候发生该事件
            
        },
        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 }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>

三、sortable 排序保存后，如何解绑

根据文档，有2种方式可以实现拖拽排序解绑，
要么你设置 disabled: true：

https://github.com/RubaXa/Sor…

要么你直接销毁当前的实例：

https://github.com/RubaXa/Sor…

_this.rootDepart.sortableObj = Sortable.create(el);
// 销毁排序
_this.rootDepart.sortableObj.destroy();

四、拓展阅读

• 《Vue进阶（幺零二）：面试必备：2021 Vue经典面试题整理（含答案）》