通过iview官网进行行背景色设置:
Table props:
- row-class-name
<Table row-key="id" :columns="columns" :data="dataList" :row-class-name="rowClassName" @on-row-click="onRowClick">
rowClassName (row, index) {
if (row.id=== this.selectId) {
return 'table-select-row'
} else if (row.children) {
return 'table-parent-row'
}
return ''
}
onRowClick(row, index) {
this.selectId = row.id
}
.ivu-table /deep/ .table-select-row td {
background-color: #8ce2cd !important;
}
.ivu-table /deep/ .table-parent-row td {
background-color: #d1e2f5 !important;
}
结果如图:
Table 标签的row-class-name 设置的样式和index序号有关!这是iview上Table 的一个对于树形数据bug。
如图中,第三行应有背景色,结果所有子节点index为3的数据也都是这个背景色。
解决方案:
选中行背景色:不同row-class-name属性去设置,通过高亮选中行属性(highlight-row)去设置。
.ivu-table /deep/ .ivu-table-row-highlight td {
background-color: #8ce2cd !important;
node行背景色:放弃树形结构,放弃“+”收起展开的功能,通过名称前面加空格来展示结构层次。