1. 确认el-table表格错位的具体情况 首先,需要明确表格错位的具体表现,比如是在数据更新后错位,还是在窗口大小变化时错位,或者是在页面初次加载时就错位。这有助于确定问题的根源。 2. 检查是否有CSS样式冲突导致错位 CSS样式冲突是导致表格错位的一个常见原因。可以检查是否有全局样式或组件样式影响了el-table的布局...
// myTable是表格的ref属性值 if(this.$refs.myTable&&this.$refs.myTable.doLayout){ this.$refs.myTable.doLayout(); } }) 1.2在生命周期updated里执行doLayout方法 updated(){ // myTable是表格的ref属性值 if(this.$refs.myTable&&this.$refs.myTable.doLayout){ this.$refs.myTable.doLayout(); }...
解决Element-ui的el-table出现的表格错位问题 一、问题出现场景: 表头比较多的情况下,一般都会选择将操作列固定在右边,这时候如果表头数据发生变化之后,表格错位的问题就出现了:如图 二、解决方案: 查看官网发现: 三、具体实现: 监听一下表头数据,发生改变后,调用 doLayout 方法即可...
1.doLayout(官方提供) 对Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法。 2.<el-table>标签上加一个class="table-fixed" 这个通过设置优先级覆盖内联样式 3.el-table-column增加width 这个是网上一个大神经过一系列排查和非人类的试探后,总结出来。 操作一列中,fixed=“right...
this.$refs.multipleTable.doLayout(); // el-table加ref="multipleTable" }); 1. 2. 3. 4. 5. 试了下不生效,说明是别的问题。 2、 查看了表格中的最后一列 发现该列的宽度设置的较低,内存已经越出,导致每行错位。将该列的宽度调宽。
element-plus组件库中的el-table组件有一个show-overflow-tooltip属性,设置为true时如果表格中数据过长就会显示一个浮动窗口 就像这样 而有时这个小浮窗会有错位的问题 像是这样,会导致靠上的列浮窗直接越界不显示 问题原因 table 下的 tooltip 是 fixed 定位。
el-table 设置固定列导致行错位的解决方案 element 官方给出的解决办法是使用doLayout,使用doLayout重新加载一下table就好了。 updated() { // tableRef是表格的ref属性值 if (this.$refs.tableRef&& this.$refs.tableRef.doLayout) { this.$refs.tableRef.doLayout();...
data.taskId = this.taskId; selectTaskProductDataListNew(data).then((res) => { if (res.code === 200) { this.tableDataDetails = res.data.tableData; this.tableHeadDetails = res.data.tableHead; // 发生错位的原因,是由于table在数据请求后,渲染异常的问题;因此,解决办法就是让table重新布局。
.el-table { overflow-y: auto !important; } 3. 问题处理 直接在el-table外围添加一个div,然后固定div的高度让其垂直滚动即可。 当然如果还需要固定表头,可以参考:ElementUI表格el-table固定表头且高度占满 4. 另一种处理方案 有时候切换表格v-if显示时,也会导致行列错位,此时可以尝试将v-if换为v-show...