elementui rowstyle

修改 ElementUI 表格行样式

ElementUI 的表格组件允许通过 row-style 属性自定义行样式。该属性接受一个函数，返回的对象会被应用到行的 style 属性中。

基本用法：

<el-table
  :data="tableData"
  :row-style="rowStyle">
  <!-- 表格列定义 -->
</el-table>

自定义函数示例：

methods: {
  rowStyle({ row, rowIndex }) {
    if (rowIndex % 2 === 0) {
      return { backgroundColor: '#f5f5f5' }
    }
    return {}
  }
}

动态条件样式

可以根据行数据动态设置样式，例如根据状态字段改变背景色：

rowStyle({ row }) {
  if (row.status === 'error') {
    return { backgroundColor: '#ffebee' }
  }
  if (row.status === 'success') {
    return { backgroundColor: '#e8f5e9' }
  }
  return {}
}

使用 CSS 类名

除了内联样式，也可以通过 row-class-name 属性设置 CSS 类：

<el-table
  :data="tableData"
  :row-class-name="tableRowClassName">
  <!-- 表格列定义 -->
</el-table>

类名函数示例：

methods: {
  tableRowClassName({ row }) {
    return row.status === 'warning' ? 'warning-row' : ''
  }
}

对应 CSS：

.warning-row {
  background-color: #fff3e0;
}

注意事项

• 样式优先级：row-style 生成的样式会覆盖 row-class-name 设置的样式
• 性能影响：复杂样式计算可能影响大型表格的渲染性能
• 响应式变化：当表格数据更新时，行样式会自动重新计算