Element ui 表格行高自定义

本文详细介绍了如何使用Element UI的el-table组件,特别关注了如何设置自定义的表头样式,包括高度、内边距和背景色。通过row-style和cell-style属性,演示了如何调整行高和单元格布局。
摘要由CSDN通过智能技术生成
<el-table :data="data" style="width: 100%" height="550" border :show-header="true" :row-style="{height:'20px'}" :cell-style="{padding:'0'}" :header-cell-style='headerStyle'>
</el-table>
					
	data() {
			return {
				headerStyle: {
					'height': '30px',
					'padding': '0',
					'background': 'rgb(84, 92, 100)',
					'color': '#fff',
				},
            }
        }

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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` 组件实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值