如何根据条件将类映射到 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;
< el-table :row-class-name="tableRowClassName">
【讨论】:
如何将td:last-child
更改为我想要的另一列?
例如:td:nth-child(2) 表示第二列以上是关于如何根据条件将类映射到 Element UI 表中的特定行单元格?的主要内容,如果未能解决你的问题,请参考以下文章
如何根据另一个组件的存在有条件地将类添加到 Magnolia 组件模板?