element ui设置table的行高

要设置Element UI表格的行高，可以使用`:row-style`属性。在该属性中，可以设置一个函数来动态计算行的样式。这个函数会传入三个参数：`{ row, rowIndex }`，其中`row`表示当前行的数据，`rowIndex`表示当前行的索引。可以在函数中返回一个对象，对象的属性是CSS样式的键值对。通过设置`line-height`属性来设置行的高度。

代码示例：

<el-table :data="tableData" :row-style="setRowStyle">
  ...
</el-table>

methods: {
  setRowStyle({ row, rowIndex }) {
    return {
      'line-height': '40px'
    };
  }
}

相关问题

element ui table 表格 行高设置不生效

如果 Element UI 表格的行高设置不生效，可能是因为你的样式被其他样式覆盖了。你可以尝试使用 !important 关键字来强制应用你的样式，或者在样式选择器前加上更具体的选择器，以提高样式的优先级。

例如，假设你想将 Element UI 表格的行高设置为 50px，你可以这样写样式：

.el-table__row {
  height: 50px !important;
}

如果这样不生效，你可以尝试使用更具体的选择器，例如：

.my-table .el-table__row {
  height: 50px;
}

其中，`.my-table` 是你表格的父元素的类名，这样选择器的优先级会更高，从而确保样式生效。

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