【已解决】el-table中多级表头调整高度

最新推荐文章于 2024-05-29 14:59:22 发布
最新推荐文章于 2024-05-29 14:59:22 发布
阅读量608 收藏 1
点赞数 1
分类专栏： 错锦 ElementUI 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44637104/article/details/127734502
版权

刮风这天，我试过解决bug……

<el-table :data="tableData" style="width: 100%" border height="245px" class='tableHei'></el-table>

<style scoped>
.tableHei /deep/ th {
  padding: 0 !important;
  height: 25px;
  line-height: 15px;
  text-align: center;
}
.tableHei /deep/ td {
  padding: 0 !important;
  height: 35px;
  line-height: 30px;
  text-align: center;
}
</style>

如果不生效，可能是你代码中有重复的给覆盖了，记得仔细看代码……

从前，从前

木得是
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element-ui动态生成多级表头的方法
12-29
<el data=tabledata01 span-method=tableSpanMethod max-height=420> <el v-for='item in tableConfig' label=item.label prop='item.prop' width='item.width' key=item.id> <el-table-column v-if='item....
vue3 el-table多级表头收缩扩展的实现（TS风味版）
07-27
用于《vue3 el-table多级表头收缩扩展的实现》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125633625
element-ui中el-table头标签过高的问题
yuZhenXS的博客
11-24 762
在使用el-table时，会出现头标签过高的情况，此时会显得比较难看 我找个很多答案，包括内嵌式的CSS修改都对我这个情况没有用，最后为在<el-table>中加入 :header-row-style="{'height':'50px','line-height':'50px'} 问题解决 ...
element el-table 表头调整高度
Mengjialei111的博客
10-07 1029
可以参考这个一下方法 ：
element el-table 设置行高 和表头高度
最新发布
小韩要快乐！
05-29 1506
第二种方式el-element-ui的方法。第一种方式 使用css。
el-table 动态隐藏现实列 表头高度异常问题
qq_40084554的博客
10-26 404
今天做项目发现动态显示和隐藏表头某几列的时候，会出现表头高度变大的情况。 解决方法： v-for 循环表头数据的时候，:key不能只有index，要加一些其他的字段组成key值。eg：item.lable_index
042：el-table表格表头自定义高度（亲测好用）
大剑师兰特的GIS世界
12-08 2205
vue项目中，我们需要在el-table中将表格表头的高度增大，这个问题很多小伙伴都遇到过，解决起来还真的不容易。博主经过一番探索，发现设置height之类的不管用，能解决问题的方法是设置好line-height。将这个值设高了，才能解决问题。具体设置请参考源代码
ElementUI表格el-table自适应高度（表头表尾固定不动）
从兄的博客
11-13 1903
div class="mt-10" :style="{'height':tableHeight}"> vue绑定变量。使用JS动态获取窗口高度。
vue3 el-table多级表头收缩扩展的实现（JS原味版）
07-27
用于《vue3 el-table多级表头收缩扩展的实现》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125633625
vue element 中的table动态渲染实现（动态表头）
10-15
在Element UI的`el-table`组件中，我们可以通过`v-for`指令遍历一个包含列信息的数组，以动态生成表头。例如： ```html <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.prop" ...
el-table设置表格高度无效
weixin_44692296的博客
01-13 7822
设置表格高度，官网给的很详细 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 因为我的项目表格的列，是请求后台后，拿到数据才进行渲染的，也就是动态的，所以在项目中遇到，即使我设置了表格高度，渲染出来的表格高度依然没有高度，但是只要我屏幕缩放，高度就会生效。 效果如图： 是通过css解决的，代码如下： /deep/.el-table{ .el-table__body-wrapper{ height: calc(100% - 48px)!i
element 表格头部设置高
小布丁儿的博客
04-27 2136
<el-table :header-cell-style="{ textAlign: 'center', height: '80px',}" > <el-table-column></el-table-column> <el-table-column></el-table-column> </el-table&..
关于饿了吗 el-table 固定列，出现表头行高错误，导致错位的问题
qq_42847304的博客
10-20 1283
在 我们原本 table 表格 渲染出来的时候，又自动生成了一个，新的 fixedtable 也就是用来 展示 固定列的table ，并且 这两个 table 表格，在一定程度上是重合在一起的（fixed table 在 原本 table的上方），fixedtable 通过 只渲染 我们选为 固定列的 列。当然，我知道自己的知识储备还很浅薄，也有可能解决这个问题方法的原理，并不是我所想的那样，希望路过的各位前辈大佬能够给予我指正。我会及时改正并学习积累。
elementui随记
zxxAdela的博客
02-17 716
element ui随记
element-ui表格表头高度不生效问题解决
qq_42499848的博客
01-11 984
本文主要记录element-ui、表格表头、表格标题栏高度设置为较小时无效的问题！通过:header-cell-style="{ ‘height’: ‘50px’}"方式设置element-ui表格表头高度为200px时可以生效，如下。.el-table .el-table__cell默认有12px的边距，将其设置为0即可。
el-table固定表头（设置height）出现内容过多时不能滚动问题
qq_42192641的博客
11-17 2255
解决：加一个div并设置其高度和overflow。主要原因是el-table没有div包裹。
el-table 修改多级表头背景色
07-27
要修改el-table的多级表头背景色，可以通过在el-table中添加:header-cell-style和:header-cell-class-name属性来实现。\[1\]\[3\]其中，:header-cell-style可以设置表头单元格的样式，可以使用一个函数来返回不同的样式对象，根据rowIndex和columnIndex来判断不同的位置，然后返回对应的背景色。:header-cell-class-name可以设置表头单元格的类名，可以根据不同的位置返回不同的类名，然后在样式表中定义对应的样式。\[1\]\[3\]需要注意的是，不要使用column的id去做判断，因为id是会改变的，可以使用rowIndex和columnIndex来判断位置。\[2\]通过这样的方式，就可以修改el-table的多级表头背景色了。 #### 引用[.reference_title] - *1* [el-table 修改多级表头背景色](https://blog.csdn.net/weixin_68878908/article/details/128680580)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [el-table 动态多级表头的背景颜色](https://blog.csdn.net/array__/article/details/123712212)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值