el-table 列拖拽排序实现 vue2版

el-table 列拖拽排序实现 vue2版

实现原理：基于sortablejs实现列头的拖动排序，根据回调函数重新与渲染表格

步骤

安装依赖

npm i sortablejs --save
或
yarn add sortablejs --save

html代码

自己封装的，可使用el-table

<common-table
 :columns="_columns_"
 row-key="id">
</common-table>

js代码

<script>
import Sortable from "sortablejs" // 1、引入Sortable
export default {
    data() {
        return {
            _columns_: Object.freeze([
                { label: '名称', prop: 'name' },
                { label: '性别', prop: 'sex' },
                { label: '年龄', prop: 'age' }
            ])
        }
    },
    mounted() {
       // 2、排序要同时配置row-key，此快判断可自行修改
       if(this.$attrs['row-key']) this.columnDropFunc()
    },
    methods: {
       // 3、排序方法
       columnDropFunc() {
          // 获取el-table需要排序的列元素
          const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
          // 初始化sortable
          this.sortable = Sortable.create(wrapperTr, {
            animation: 180,
            delay: 0,
            // 拖拽结束后的回调
            onEnd: evt => {
              // 表格展示 "序号"、"多选"、"单选（自己封的）"的时候，要将evt.oldIndex和evt.newIndex减去这些出现的次数，不然列排序后可能表格数据列改变的不是想要的那一列（会错位）
              const tunedCol = ['showIndex', 'selection', 'singleSelection']
              const tunedColNum = tunedCol.reduce((count, key) => {
                if(this.tableOption.hasOwnProperty(key)) count++
                return count
              }, 0)
              // 重新更新表格的列数据_columns_
              const _oldIndex = evt.oldIndex - tunedColNum
              const _newIndex = evt.newIndex - tunedColNum
              const oldItem = this._columns_[_oldIndex]
              this._columns_.splice(_oldIndex, 1)
              this._columns_.splice(_newIndex, 0, oldItem)
              // 强制刷新视图
              this.$forceUpdate()
            }
          })
        }
    }
}
</script>

问题

表格数据列改变的不是想要的那一列, 排序后排序的列没动，后面的列变了
原因：多选、索引也是在列元素内
处理方法：const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
获取排序列元素的时候将多余的去掉，或者evt.oldIndex、evt.newIndex 将多余的次数减掉(- tunedColNum)

参考文章
www.jianshu.com/p/adafce7ed… blog.csdn.net/weixin_4223…