1.如表格中有固定列,拖拽折行会导致错位 解决方案:监听鼠标事件,通过doLayout重绘表格 注意:DOM更新一步操作,doLayout重新布局需要放在nextTick/setTimeout等异步操作中 this.$nextTick(()=>{ const headerDom=this.$refs.Table.$el.getElementsByClassName('el-table__header-wrapper')[0] const fixedHeaderDom=t...
width = newWidth; } return item; }); // 最后存一份到本地,当刷新的时候,就用本地的这个记录了用户拖动宽度的表头数组数据 sessionStorage.setItem("tableHeader", JSON.stringify(newTableHeader)); }, }, }; </script> 如果是后端存一份也是一个道理,只要在表格拖动事件的回调函数中把对应列的宽度更改...
el-table列宽拖动的原理是通过监听鼠标的mousedown、mousemove和mouseup事件来实现。 1.首先,在表头的每个列的标题处添加一个可拖动的元素,比如一个三角形图标或者一个拖动手柄图标。 2.当用户点击并按住表头上的可拖动元素时,触发mousedown事件。在该事件的处理函数中,记录当前鼠标的坐标,并给document对象添加mousemove和...
产品大佬提出，当用户在表格中拖动调整列宽后，刷新页面时列宽会恢复至默认状态。为了解决这一问题，我们增加了一个表格拖动列，刷新后宽度仍保持功能。实现这一功能的关键在于数据存储。我们选择将数据保存在前端，以避免后端操作带来的复杂性。以下是将表格列宽数据存储在本地的代码实现。当拖动列宽后，页面...
原因是<table>的style width设成了auto !important,覆盖了style="width: 1638px;" 此外,关于列宽的拖动修改 border 实现更新宽度style="width: 1638px;"的地方是 doLayout() { if (this.shouldUpdateHeight) { this.layout.updateElsHeight(); }
使用el-table-v2组件时,在拖动滚动条时,合并渲染不正常显示,同时不能实现列宽调整,能否有解决方案? <template> <el-table-v2 fixed :columns="columns" :data="data" :width="300" :height="400" @scroll="disscr" > <template #row="props"> ...
// 根据column中的信息就可以知道用户拖动的是哪一列,从而将新的列宽度替换原来的列宽度 let newTableHeader = this.tableHeader.map((item, index) => { if (item.propName == column.property) { item.width = newWidth; } return item; }); ...
3.禁用列宽拖动:如果你不希望用户拖动表头改变列宽,可以设置`resizable`属性为`false`。 ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name" :resizable="false"></el-table-column> <el-table-column label="年龄" prop="age" :resizable="false"></el-table-column>...
没有看源码,但是看起来是为了去确定拖动列改变宽度的基准吧。 比如说没有添加的 border 属性的表格是没有列分割的,那么你就不知道应该把鼠标放到何处去拖动改变列宽,因为一般都会给 cell 增加padding 留白: 添加了 border 之后就可以很明确的表示应该把鼠标放到哪里。 所以ELe+ 增加了这个限制应该也是处于这样的考量...
@yuntao1997有几个bug,1、在element-admin里面,多个table用了这个指令,就注册了多个resize事件 2、在一个有边框的table上,当有一列的宽度没有设置的时候,拉伸这一列,整个页面页面就会卡死,死循环了。 yuntao1997mentioned this pull requestMar 14, 2019 ...