如何使得ec:table出现滚动条

方法一:
用一个div将table 套住,把层的宽和高都设为定长,

<div style="overflow-y:scroll;width:100%;height:100%">
<ec:table>

</ec:table>
</div>


overflow-y不要设置为visible。

这种方法不仅适用于ectable,普通table也适用。


<div style="overflow-y:scroll;width:100%;height:100%">
<table>

<table>
</div>



方法二:

<ec:table listHeight="300" showYScoll = "true">

</ec:table>

此方法仅适用于ectable。
### 解决 Element UI `el-table` 表格右边框缺失 为了修复 `el-table` 的右边框显示不全的问题,可以采取以下几种方法: #### 方法一:CSS样式调整 通过自定义 CSS 样式来强制设置表格及其子元素的边框属性。可以在项目中的全局或局部样式文件中入如下代码片段[^1]。 ```css /* 设置整个表格以及单元格的右边界 */ .el-table::before { height: 0; } .el-table th.gutter:last-child .gutters, .el-table td.gutter:last-child .gutters{ display: block !important; width: 0px !important; } .el-table--border th.is-bordered:last-child, .el-table--border tr:nth-last-of-type(odd)>td:last-child, .el-table--border tr:nth-last-of-type(even)>td:last-child { border-right: 1px solid #dfe6ec!important; } ``` 此段代码的作用在于移除默认情况下浏览器渲染时可能存在的间隙,并确保最后一列拥有完整的右侧边框线。 #### 方法二:修改组件配置项 如果上述方式未能解决问题,则考虑是否存在其他因素干扰了样式的正常应用。此时可尝试检查并适当调整 `el-table` 组件的相关参数配置,比如取消某些不必要的特性开关或是更改布局模式等[^2]。 例如,在初始化 `el-table` 实例时关闭滚动条自动隐藏功能(当数据量较少时不展示横向/纵向滚动条),这有助于保持表格结构的一致性和美观度: ```javascript <el-table :data="tableData" stripe style="width: 100%;" fit> <!-- ... --> </el-table> ``` 其中 `fit=true` 参数可以让表格宽度适应父容器,从而减少因尺寸计算误差而导致的视觉异常情况发生。 #### 方法三:更新依赖版本 最后一种可能是由于所使用的 Element UI 版本存在 bug 或者兼容性问题引起的。建议查看官方文档确认当前环境下的最佳实践指南,并适时升级至最新稳定版以获取更好的支持和服务[^3]。 对于 Vue CLI 创建的应用程序而言,可以通过命令行工具轻松完成包管理操作: ```bash npm install element-ui@latest --save # 或者使用 yarn yarn add element-ui@latest ``` 执行以上指令后记得重启开发服务器以便使新的库生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值