elementui rowstyle

修改 ElementUI 表格行样式

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

基本用法

在表格组件上绑定 row-style 属性，传入一个函数。该函数接收当前行数据 row 和行索引 rowIndex 作为参数，返回一个样式对象。

<el-table
  :data="tableData"
  :row-style="rowStyle">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

methods: {
  rowStyle({ row, rowIndex }) {
    return {
      backgroundColor: rowIndex % 2 === 0 ? '#f9f9f9' : '#fff',
      color: row.age > 30 ? 'red' : 'inherit'
    }
  }
}

条件样式

可以根据行数据动态设置样式。例如，当年龄大于 30 时，文字显示为红色：

rowStyle({ row }) {
  return {
    color: row.age > 30 ? 'red' : 'inherit'
  }
}

斑马纹效果

通过判断行索引的奇偶性来设置交替的背景色：

rowStyle({ rowIndex }) {
  return {
    backgroundColor: rowIndex % 2 === 0 ? '#f5f5f5' : '#ffffff'
  }
}

禁用行样式

对于某些特定行，可以添加禁用样式：

rowStyle({ row }) {
  return row.disabled ? {
    backgroundColor: '#eee',
    color: '#ccc',
    cursor: 'not-allowed'
  } : {}
}

响应式样式

如果需要根据屏幕宽度调整行样式，可以在函数中加入媒体查询逻辑：

rowStyle({ row }) {
  const style = {}
  if (window.innerWidth < 768) {
    style.fontSize = '12px'
  }
  return style
}

注意事项

1. 样式对象中的属性需要使用驼峰命名法（如 backgroundColor 而非 background-color）
2. 返回的样式会直接应用到行的 style 属性，优先级高于 CSS 样式表
3. 对于复杂的样式逻辑，建议在计算属性或方法中预先处理好

通过灵活使用 row-style 属性，可以实现各种复杂的表格行样式需求。