本文主要是介绍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行背景色:放弃树形结构,放弃“+”收起展开的功能,通过名称前面加空格来展示结构层次。
这篇关于iview的Table设置选中行的背景色的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!