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

Posted

技术标签:

【中文标题】如何根据条件将类映射到 Element UI 表中的特定行单元格?【英文标题】:How to map class to particular row cell in Element UI table based on condition? 【发布时间】:2018-12-06 06:13:03 【问题描述】:
<el-table :data="confirmedAppointments" highlight-current-row style="width: 100%">
                  <el-table-column type="index" >
                  </el-table-column>
                  <el-table-column prop='token' label="Token" >
                  </el-table-column>
                  <el-table-column prop='date'  label="Appoint. date" >
                  </el-table-column>
                  <el-table-column prop='ROV' label="ROV" >
                  </el-table-column>
                  <el-table-column prop='speciality' label="Speciality" >
                  </el-table-column>
                  <el-table-column prop='time' label="Appoint. time" >
                  </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 表格组件。在最后一列,我的状态显示 Appproved 或 Rejected 文本。

那么如何根据单元格值将特定类设置为特定单元格。默认情况下,该类应为红色,但当状态值为 Approved 时,该类应为绿色。

【问题讨论】:

【参考方案1】:

查看cell-class-name 表属性而不是行类名称。它可以访问行和列数据以及行和列索引。 您应该能够自定义类,从而为每个单独的单元格设置样式。

【讨论】:

【参考方案2】:

我对元素 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;
  
&lt; el-table :row-class-name="tableRowClassName"&gt;

【讨论】:

如何将td:last-child 更改为我想要的另一列? 例如:td:nth-child(2) 表示第二列

以上是关于如何根据条件将类映射到 Element UI 表中的特定行单元格?的主要内容,如果未能解决你的问题,请参考以下文章

EF:将类属性映射到行而不是列

如何根据另一个组件的存在有条件地将类添加到 Magnolia 组件模板?

如何在 Vue 中有条件地添加一个类?

ef核心 - 如何将类映射的多个变体放到同一个表中

vue 中给element-ui rules 根据条件添加必选与非必选的校验

Vue——element-UI el-table表格根据搜索条件表格值改变颜色