一、场景
实现表格列宽度可拖拽
二、方案
查阅文档
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; } } }
标签:el,表格,refs,table,Table,border,拖拽 From: https://www.cnblogs.com/younghxp/p/17719503.html