一、场景 实现表格列宽度可拖拽 二、方案 查阅文档 el-table增加border属性 el-table-colunm增加resizeable属性,若想某一列宽度不可拖拽,设置resizeable属性为false 即可实现 三、问题 1.如表格中有固定列,拖拽折行会导致错位 解决方案:监听鼠标事件,通过doLayout重绘表格 注意:DOM更新一步操作,doLayout重新布局需要...
setItem("tableHeader", JSON.stringify(newTableHeader)); }, }, }; </script> 如果是后端存一份也是一个道理,只要在表格拖动事件的回调函数中把对应列的宽度更改即可,然后告知后端(比如通过接口)当然表头数据也要通过后端获取,就不是前端代码中写死的了 好记性不如烂笔头,记录一下把^_^ 发布于 2022-01-...
el-table列宽拖动的原理是通过监听鼠标的mousedown、mousemove和mouseup事件来实现。 1.首先,在表头的每个列的标题处添加一个可拖动的元素,比如一个三角形图标或者一个拖动手柄图标。 2.当用户点击并按住表头上的可拖动元素时,触发mousedown事件。在该事件的处理函数中,记录当前鼠标的坐标,并给document对象添加mousemove和...
使用el-table-v2组件时,在拖动滚动条时,合并渲染不正常显示,同时不能实现列宽调整,能否有解决方案? <template> <el-table-v2 fixed :columns="columns" :data="data" :width="300" :height="400" @scroll="disscr" > <template #row="props"> <Row v-bind="props" /> </template> </el-table-v2...