VXEtable/VXEgrid 表格sorttablejs实现行列拖拽功能

1、配置vxe-grid组件：

:row-config="{useKey: true}"   
:scroll-y="{enabled: false}"
:key="tableKey"

2、导包

import Sortable from 'sortablejs'

3、实现拖拽函数

        //行拖拽
        rowDrop() {
            this.$nextTick(() => {
                let xTable = this.$refs[this.tableRef]
                this.sortableObj = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
                    handle: 'td',
                    onEnd: ({
                        newIndex,
                        oldIndex
                    }) => {
                        // 换序操作
                        //let tmpdata = this.tdata.map(el=>{return el._X_ID})
                        let currRow = this.tdata.splice(oldIndex, 1)[0]
                        this.tdata.splice(newIndex, 0, currRow)
                        //this.tdata.forEach((el,index) => {el._X_ID = tmpdata[index]})

                        //const codeCurrRow = this.code.splice(oldIndex, 1)[0]
                        //this.code.splice(newIndex, 0, codeCurrRow)

                        this.tableKey ++;
                    }
                })
            })
        },
        //列拖拽
        columnDrop() {
            this.$nextTick(() => {
                let xTable = this.$refs[this.tableRef]
                this.sortableObj2 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'), {
                    handle: '.zb-h',
                    onEnd: ({
                        newIndex,
                        oldIndex
                    }) => {
                        // 换序操作
                        let currRow = this.columns.splice(oldIndex, 1)[0]
                        this.columns.splice(newIndex, 0, currRow)
                        xTable.reloadColumn(this.columns)
                        this.tableKey ++;
                    }
                })
            })

 4、调用拖拽函数

this.rowDrop() ;
this.columnDrop();

--以上4步即可对普通表格进行拖拽内容换序

Q：若有锁定列固定列则无法进行拖拽怎么办？

A：因为vxetable对锁定列固定列的做法是多复制一个实例，即两张表，进行的重叠效果。所以以上使用的querySelector中的el是无法select到的。

行拖拽解决方法：

5、增加vxe-grid配置项

:tooltip-config="{showAll: true, contentMethod: showTooltipMethod}"
@cell-mouseenter="rowDrop"


// 实现showTooltipMethod方法
showTooltipMethod(){
    return '' ;
}

6、修改querySelector中的el

xTable.$el.querySelector('.fixed-left--wrapper>.vxe-table--body tbody')

7、watch监控tableKey

tableKey : {
            handler: function (nv,ov) {
                if (this.sortableObj2){
                    this.sortableObj2.destroy() ;
                }
                this.columnDrop() ;
            },
            immediate: true
 }

总结：根据querySelector中的el进行拖拽，有固定列锁定列的情况下需使用tableKey来刷新表格