如何更改元素中特定行的样式 UI Table

Question

我正在为我的网络应用程序使用 Element UI。在我的应用程序中，有一个 table 组件，它是由 Element UI.

提供的 el-table 组件制作的

我想更改唯一特定行的样式。

首先，请看一下截图和我的代码，稍后我会解释我想用它们具体做什么。

这些是 table 在我的应用程序和我的代码中的屏幕截图。

<template>
  <el-table
    :data="tableData"
    height="250"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Address">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-08',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-06',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-07',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }],
      }
    }
  }
</script>

我想将数据为 2016-05-03 和 2016-05-04 的行的背景颜色更改为蓝色。

Answer 1

在组件样式表中添加此代码

.el-table tr:nth-child(odd) {
    background-color: #845353;
}

Answer 2

你应该看看这个 https://element.eleme.io/#/en-US/component/table#table-with-status。基于属性 row-class-name 你可以应用一些逻辑来添加一个 class 到行。

<el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">

JS

methods: {
  tableRowClassName({row, rowIndex}) {
    if (row.date >= new Date()) {
      return 'warning-row';
    } else if (rowIndex === 3) {
      return 'success-row';
    }
    return '';
  }
},

当然，您必须根据自己的需要对其进行自定义

Answer 3

另外+

如果您使用的是新版本的 Element-UI 和 row-style 而不是 header-row-class -name，不能用like return: 'background: red'。你必须 return Object.

例如：return: {'background': 'red'}

如何更改元素中特定行的样式 UI Table

How to change style in specific row in Element UI Table

vue.js

element-ui