element-ui表格el-table固定表头,统一控制行高

log:

1.固定表头增加height

2.表格数据内容太大导致行高不统一,如下代码处理行高统一为40px

组件:
<el-table class="tableClass" :data="formData.result" border height='350' width='500'>
   <el-table-column v-for="key in formData.listkey" :key="key" :prop="key" :label="key"> 
   </el-table-column>
</el-table>


样式:
.tableClass .cell{   
    padding: 0!important;
    height: 40px;
    line-height: 30px!important;
    text-align: center;
  }

 

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Element UI 的 `el-table` 中,可以通过设置 `row-height` 属性来定义每一行的高度。默认情况下,行高是由表格的内容自动撑开的。 如果需要获取行高,可以通过以下两种方式实现: 1. 通过 CSS 获取行高 在 CSS 中,可以使用 `height` 属性获取元素的高度。因此,可以通过以下代码获取 `el-table` 中所有行的高度: ``` // 获取 el-table 中所有行的高度 const rows = document.querySelectorAll('.el-table__row') const rowHeight = rows[0].getBoundingClientRect().height ``` 2. 通过 `el-table` 的 `row-class-name` 属性获取行高 `el-table` 组件提供了 `row-class-name` 属性,可以用来为每一行添加自定义的类名。我们可以通过这个属性来获取行高。 首先,需要在 `el-table` 中设置 `row-class-name` 属性,并传入一个函数,函数的参数是行数据对象,函数的返回值是一个字符串,代表这一行的类名。可以在这个函数中计算行高,并将行高保存在行数据对象中。 例如,我们可以这样实现: ``` <el-table :data="tableData" row-class-name="getRowClassName"> ... </el-table> ``` ``` methods: { getRowClassName(row) { // 计算行高并保存在行数据对象中 row.height = 50 return '' } } ``` 然后,在需要获取行高的时候,可以遍历 `el-table` 的数据源,获取每一行的高度: ``` // 遍历 el-table 的数据源,获取每一行的高度 const rows = this.tableData.map(row => row.height) ``` 注意:如果使用第二种方法,需要在行数据对象中保存行高,因为 `el-table` 组件会将行数据对象作为 `tr` 元素的 `data` 属性传递给 `render` 函数,而 `render` 函数无法直接访问 `el-table` 组件实例。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值