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

一、场景

实现表格列宽度可拖拽

二、方案

查阅文档

el-table增加border属性
el-table-colunm增加resizeable属性，若想某一列宽度不可拖拽，设置resizeable属性为false

即可实现

三、问题

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

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

注意：DOM更新一步操作，doLayout重新布局需要放在nextTick/setTimeout等异步操作中

 　　　　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;
        }
    }
}