解决 sortablejs影响element ui表格列的拖动

//引入
import Sortable from 'sortablejs'

//
watch:{     
        isResetRender(val){
            if(val){
                this.$nextTick(()=>{
                    //重新渲染后,要重新初始化
                    this.initColumnDrop()
                })
            }
        }
    },
//在组件中实现
initColumnDrop() {
            let me = this;
            const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
            me.sortable = Sortable.create(wrapperTr, {
                animation: 180,
                delay: 0,
                onEnd: evt => {
                    if(evt.newIndex == evt.oldIndex){
                        //这一句,是判断相同时不移动,也是解决,列宽拖动的问题
                        return;
                    }
                    let diff = 0;
                    me.isResetRender=false;//重渲染标识
                    const oldItem = me.columns[evt.oldIndex];
                    me.columns.splice(evt.oldIndex, 1);
                    me.columns.splice(evt.newIndex, 0, oldItem);
                    me.sortable.destroy();
                    me.$nextTick(()=>{
                        me.isResetRender=true;//就是v-if 重渲染,主要是有分组表头情况下,表头渲染会有问题
                    })
                }
            })
},

//在组件 mounted 勾子中 调用方法
this.initColumnDrop()

你可能感兴趣的:(ui,vue.js,elementui)