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

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值