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` 是你表格的父元素的类名，这样选择器的优先级会更高，从而确保样式生效。

vue2如何对Element表格清楚选中行高亮

在Vue2中，你可以通过Element UI的表格组件`el-table`以及其提供的API来实现在点击行时高亮选中的效果。下面是一个简单的步骤：

1. 首先，在模板中给每一行添加一个`@click`事件处理器，用于触发行的选择操作，并同时改变行的样式。例如：

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column type="index"></el-table-column>
    <!-- 其他列... -->
    <el-table-column label="操作" prop="action">
      <template slot-scope="{ row }">
        <el-button @click="highlightRow(row)" type="primary">选择</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

2. 创建一个方法`highlightRow`，接收当前选中的行数据作为参数，然后更新该行的样式。这里可以用自定义属性如`:class`来控制高亮样式，比如设置`.selected`类：

<script>
export default {
  data() {
    return {
      tableData: [], // 表格的数据
      selectedRowKeys: [] // 记录选中的行key
    };
  },
  methods: {
    highlightRow(row) {
      if (this.selectedRowKeys.includes(row.id)) {
        this.$set(row, 'highlight', false); // 取消高亮
      } else {
        this.selectedRowKeys.push(row.id);
        this.$set(row, 'highlight', true); // 设置高亮
      }
    },
    handleSelectionChange(selectedRows) {
      this.selectedRowKeys = selectedRows.map(row => row.id);
    }
  },
  computed: {
    // 如果需要，也可以在这里计算是否高亮，避免在每个row上都设置data
    highlightedRows() {
      return this.tableData.filter(row => row.highlight);
    }
  }
};
</script>

在上面的代码中，`highlightRow`方法会切换`highlight`这个自定义属性的值，而`handleSelectionChange`则处理用户在列表中选择的行。