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

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

tableKey:0
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.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.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来刷新表格
————————————————
版权声明：本文为CSDN博主「阿Ruey」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38149488/article/details/125502964