如何根据条件将类映射到Element UI表格中的特定行单元格？

Question

<el-table :data="confirmedAppointments" highlight-current-row style="width: 100%">
                  <el-table-column type="index" width="50">
                  </el-table-column>
                  <el-table-column prop='token' label="Token" width="180">
                  </el-table-column>
                  <el-table-column prop='date'  label="Appoint. date" width="180">
                  </el-table-column>
                  <el-table-column prop='ROV' label="ROV" width="180">
                  </el-table-column>
                  <el-table-column prop='speciality' label="Speciality" width="180">
                  </el-table-column>
                  <el-table-column prop='time' label="Appoint. time" width="180">
                  </el-table-column>
                  <el-table-column prop='status' label="Status" class="red" v-bind:class="{ 'green': status == 'Accepted' }">
                  </el-table-column>

              </el-table>

我正在使用与动态数据映射的Element UI表格组件。在最后一列中，我有一个状态显示已批准或已拒绝的文本。

那么如何根据单元格值为特定单元格设置特定类？默认情况下，类应为红色，但当状态值为“已批准”时，类应为绿色。

- Faizan Saiyed

Answer 1

我对Element UI不是很熟悉，但我通过将row-class-name添加到el-table中解决了类似的问题。

tableRowClassName({ row }) {

    if (row.status === 'Appproved') {
        return 'success-row'
      } else if (row.status === 'Rejected') {
        return 'warning-row'
      }
      return ''
    },

  .el-table .warning-row td:last-child {  (or just .el-table td:last-child (as default color))

    background: red;
  }

  .el-table .success-row td:last-child {

    background: green;
  }

< el-table :row-class-name="tableRowClassName">

- Andrii Dotsia

---

如何将 td:last-child 更改为我想要的另一列？ - Hobas Matius

例如：td:nth-child(2) 表示第二列。 - Andrii Dotsia

Answer 2

请查看cell-class-name表格属性，而不是row-class-name。它可以访问行和列数据以及行和列索引。您应该能够自定义类和每个单元格的样式。

- featlorin