el-table遇到的一些坑(列错位,行错位,实现跨页多选)

布局错位的问题

遇到的问题是:后台管理系统中表格的操作列在出现了行错位的问题,如下图,
在这里插入图片描述
因为以前的项目中也遇到el-table中渲染出现最下面一列会渲染不全,以及有时候拖拽某一列时会出现列的错位问题,都是通过el-table的doLayout()解决了,
关于doLayout()官方文档如下描述
在这里插入图片描述
具体用法就是在获取数据时使用如下代码

// 获取表格数据的时候使用

	this.$nextTick(()=>{
             this.yongliTableData = res.data
             this.refs.yonglitable.doLayout()
           })

以及在app.vue中添加以下样式

<style>
body .el-table th.gutter {
  display: table-cell !important;
}
body .el-table colgroup.gutter {
  display: table-cell !important;
}
</style>

这次居然不行了,此时黑人问号脸…
再后来检查发现,出现这个行错位的问题是我的操作列使用了fixed属性,并且列表里使用了el-tooltip,
解决方法,去除el-tooltip,使用tl-table中的show-overflow-tooltip属性实现当内容过长被隐藏时显示 tooltip的需求
完美解决如下:
在这里插入图片描述

跨页多选的实现

现在的情形是,分页数据是每次翻页时发送请求返回的后台数据,现在想实现跨页多选,本来想的自己实现的方法是将选中的行数据存起来,每次请求后判断一下有没有已经选过的数据,有的话,再根据el-table的方法toggleRowSelection进行选中,感觉相当的麻烦,直到在官方文档发发现了这个属性
在这里插入图片描述
沃特,这不是我的需求吗?完美解决!!!
代码如下:

			<el-table-column
            :reserve-selection="true"
            type="selection"
          ></el-table-column>

按照人家的要求表格里再加上row-key属性(ID类的属性就可以)。

### 解决 el-table 滑动错位问题 对于 `el-table` 组件,在处理表格时可能会遇到固定遮挡横向滚动条以及滑动过程中产生的错位现象。以下是几种有效的解决方案: #### CSS 调整方式 通过自定义样式来调整 `.el-table__fixed-right` 的内边距,可以有效防止固定覆盖滚动条并减少视觉上的错位感。 ```css ::v-deep .el-table .el-table__fixed-right { padding-bottom: 10px !important; } ``` 此段代码增加了底部填充,使得当面含有水平滚动条时不会被隐藏掉[^2]。 #### 数据加载后的布局重置 为了确保表格结构能够及时响应数据变化而做出相应调整,可以在每次获取新数据之后调用 `doLayout()` 方法刷新表格布局。这一步骤应该放置于 `$nextTick` 中以等待DOM更新完成后再执操作。 ```javascript // 假设 'myTable' 是你在模板中为 <el-table> 设置的 ref 属性值 this.data = newData; // 更新表格的数据源 this.$nextTick(() => { const tableRef = this.$refs.myTable; if (tableRef && typeof tableRef.doLayout === 'function') { tableRef.doLayout(); } }); ``` 上述 JavaScript 片段展示了如何在 Vue.js 生命周期钩子函数内部使用 `doLayout()` 来修复由于内容改变引起的显示异常情况[^4]。 #### 防止宽度设置引发的问题 值得注意的是,为了避免因设定固定的宽度而导致更复杂的渲染错误,应尽量避免给与固定相邻的单元格指定具体的宽度。这样可以让浏览器自动计算最佳尺寸从而降低潜在冲突的可能性[^3]。 综上所述,结合以上三种策略——适当修改CSS、适时触发重新布局以及谨慎管理各栏目的宽高比例——通常能较好地应对大数场景下的 `el-table` 数过造成的各种显示不一致的情况。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值