el table怎么获取行高_element-ui里的el-table

在 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` 组件实例。