解决iview中表格变色问题

6

解决iview中表格变色问题,iview中提供了给表格修改颜色的功能,但是咋一看,还是不好理解的,接下来我就为大家来解析一下如何实现表格的隔行变色。 1、给Table添加一个自定义…

解决iview中表格变色问题,iview中提供了给表格修改颜色的功能,但是咋一看,还是不好理解的,接下来我就为大家来解析一下如何实现表格的隔行变色。

1、给Table添加一个自定义属性

1
<Table :row-class-name="rowClassName"></Table>

2、在methods中添加rowClassName事件

1
2
3
4
5
6
7
8
    rowClassName (row, index) {
      if (index % 2 === 1) {
        return 'demo-table-info-row';
      } else if (index % 2 !== 1) {
        return 'demo-table-error-row';
      }
      return '';
    }

3、给表格上色

1
2
3
4
5
6
.demo-table-info-row {
  background: #ccc;
}
.demo-table-error-row {
  background: #f1f1f1;
}

如果还不了解,可以访问

https://www.iviewui.com/components/table#TDYS

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注