iview的Table设置选中行的背景色

iview的Table设置选中行的背景色

通过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行背景色：放弃树形结构，放弃“+”收起展开的功能，通过名称前面加空格来展示结构层次。