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

最新推荐文章于 2024-05-05 21:24:52 发布

前端开发工程师

最新推荐文章于 2024-05-05 21:24:52 发布

阅读量741

点赞数

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/caibinghong/article/details/130109245

版权

//引入
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()