业务需求
在使用 ant-design-vue 的 Table组件的时候,在某个业务模块的内因其承载的功能比较多,各个条件间界定不明显导致感官上十分的模糊,所以需要增加类似斑马纹的填充区分。
table组件自带只支持行的斑马纹而我们需要的是列的斑马纹。table 组件本身是不支持的所以只能通过其他方式来实现。
解决思路
官方提供了一个rowClassName的方法,可以自定义添加 class 来实现对表格不同样式的修改。但是尝试后发现还是只能更改行的样式,并不能改变列的样式。
我们要实现列的斑马纹要对每一行 tr 中 td 来设置不同的 class,而且涉及到有的列会被合并单元格,所以在设置的时候需要考虑的场景还比较多。
因为这个组件中 table 的 Column 是通过自定义的方式来显示的。因为每一列的表头都不一样,所以都是单独设置的。
解决方法
首先 table 的 Head 方面比较容易实现,直接在配置上添加 class 即可。
class: 'custom-column'
{
title: 'name',
dataIndex: 'gid',
align: 'center',
width: 120,
class: 'even-row',
}
table 主体添加的方式在研究后其实也是非常的简单,直接通过customCell来根据不同的 index 设置 class 即可。
{
title: '条件',
dataIndex: 'index',
class: 'even-row',
customCell: (record, rowIndex, columnIndex) => {
return { class: columnIndex % 2 === 0 ? 'even-row' : 'odd-row' };
},
}
上面直接在customCell 中 return 返回 一个相同 class 即可,那么在每一行的这一列中的 td 都会加上相同的 class。如果按照上面的写法就是在同一列中不同行可以实现不同的样式。这个还是看个人的需求。
实现效果
通过上面的方法成功的实现了功能需求而且还可以扩展其他的样式。比如自定义列不同的样式实现多元化的展示。最终实现的效果如下。
标签:vue,自定义,样式,斑马,Ant,table,class,row From: https://blog.51cto.com/u_17042992/12130120