vue3+elementplus el-table滚动条在Mac本消失

        前几天发现在自己的项目中出现一个问题,这个问题应该很久了,但是一直都没人提(可能测试的电脑是window的原因),就是在Mac本上el-table滚动条会消失。

        先说一下滚动条在el-table上消失的原因吧,就是必须给一个max-height或者hight,在onmounted生命周期中。

        我一直很好奇原因,然后看到了源码发现也没什么问题,首先我发现elementplus跟elementui的table不一样的地方是滚动条是自定义的,需要根据是不是hover上去显示隐藏的,然后我又发现其实是已经显示了,就是里面那个滚动条没有得到计算

 

看到这个transform没有,一直没有变化,所以我们打开elementui的源码看一下 ,然而什么都没查到所以进一步猜测应该不是表格的问题,后来我在官网看demo的时候发现如果没有设置max-height,跟height也会出现这个问题但是只在mac本上,window上没有问题,我就试着加了一个默认值,并用resize监听,果然解决了。

Vue.js中结合Element UI库创建横向滚动表格(el-table),你可以使用Element UI提供的`el-table-column`组件以及自适应列宽的属性`show-overflow-tooltip`和`min-width`来解决错位问题,并通过设置`width`属性为百分比配合`auto-fit`模式来实现自动布局。 首先,在模板中,你可以这样配置el-table: ```html <template> <div class="table-container"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name" width="20%" show-overflow-tooltip min-width="80px" ></el-table-column> <!-- 添加其他列 --> <el-table-column prop="otherColumn" label="Other Column" width="20%" <!-- 可调整列宽 --> :show-overflow-tooltip="true" min-width="80px" ></el-table-column> <!-- ... --> <el-table-column type="expand" label="Expand"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: 'Item 1', otherColumn: 'Data for Item 1' }, // 更多数据... ] }; } }; </script> <style scoped> .table-container { overflow-x: auto; /* 设置水平滚动 */ } </style> ``` 这里,`width`属性设置了列的初始宽度,`min-width`保证了最小显示宽度,而`show-overflow-tooltip`可以让超出内容有提示。同时,给包含表格的容器添加`overflow-x: auto`可以使其在内容过多时显示水平滚动条。 如果需要自动调整列宽,你可以将`width`属性设为百分比(如上例中的`20%`),然后启用`el-table`的`auto-fit`属性: ```html <el-table :data="tableData" :auto-fit="true" style="width: 100%"> ``` 这会使得列宽按照内容填充表格空间。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值