el-table固定列最后一项显示不全(只显示上半部分数据)

文章介绍了在前端开发中遇到的一个问题,即由于高度设置不当,导致表格的固定列被内容覆盖。解决方案是通过修改CSS样式,设置表格固定列的高度为100%,并调整z-index和overflow属性,确保内容能完整滚动显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原因:高度不够,导致被覆盖

示例:

 

 解决方法:

// 计算方式,高度,滚动可以保证高度不受限制,页面内容会完全显示
::v-deep .el-table__fixed {
    height: 100% !important;
    z-index: 50;
  }
  ::v-deep .el-table__body-wrapper {
    overflow: scroll !important;
  }
  ::v-deep .el-table__fixed:before {
    width: 0;
    height: 0;
  }

### 解决 Element UI `el-table` 勾选固定并支持上下滚动的问题 为了使 `el-table` 中的勾选保持固定并在表格上下滚动时丢失位置,可以采用以下方法: #### 设置表头和勾选固定属性 通过给 `<el-table>` 组件添加 `row-key` 属性来唯一标识每一行数据,并设置 `reserve-selection=true` 来保留已选择项的状态。对于需要固定的勾选,在对应的 `<el-table-column>` 标签上增加 `fixed="left"` 参数[^1]。 ```html <template> <div> <el-table :data="tableData" @selection-change="handleSelectionChange" row-key="id" border style="width: 100%" ref="multipleTable" height="400px"> <!-- 固定左侧的选择框 --> <el-table-column type="selection" width="55" fixed="left"></el-table-column> <!-- 其他定义 --> </el-table> </div> </template> ``` #### 处理页情况下保存选择状态 当存在页时,还需要处理页面切换后的选择状态恢复逻辑。这可以通过监听 `@current-change` 或者 `@size-change` 事件获取当前页码变化情况,并调用 `toggleRowSelection()` 方法手动控制某些行被选中或取消选中的状态。 #### JavaScript代码示例 ```javascript export default { data() { return { tableData: [], // 表格的数据源 multipleSelection: [] // 存储用户所选项 }; }, methods: { handleSelectionChange(val) { this.multipleSelection = val; } } }; ``` 上述配置能够有效解决 `el-table` 的勾选在上下滚动过程中可能出现的位置偏移问题,同时确保即使是在多页浏览的情况下也能正确记忆用户的勾选操作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值