526互联

el-table表格列宽度可拖拽及注意事项

发布时间 2023-09-21 11:31:07作者: 盼星星盼太阳

一、场景

实现表格列宽度可拖拽

二、方案

查阅文档

el-table增加border属性
el-table-colunm增加resizeable属性

即可实现

三、问题

1.如表格中有固定列，拖拽折行会导致错位

解决方案：监听鼠标事件，通过doLayout重绘表格

 　　　　this.$nextTick(()=>{
            const headerDom = this.$refs.Table.$el.getElementsByClassName('el-table__header-wrapper')[0]
            const fixedHeaderDom = this.$refs.Table.$el.getElementsByClassName('el-table__fixed-header-wrapper')[0]
            if(headerDom){
                headerDom.addEventListener('mouseup',e=>{
                    setTimeout(()=>{
                        this.$refs.Table.doLayout()
                    }, 500)
                })
            }
            if(fixedHeaderDom){
                fixedHeaderDom.addEventListener('mouseup',e=>{
                    setTimeout(()=>{
                        this.$refs.Table.doLayout()
                    }, 500)
                })
            }
        })

2.增加border边框树形，导致滚动条被遮住部分

审查元素，去掉宽度/高度即可

/deep/{
    .el-table--border{
        // border: none;
        &::after {
            width: 0;
        }
    }
}