Ant-design-vue Table 自定义列斑马纹效果

业务需求

在使用 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。如果按照上面的写法就是在同一列中不同行可以实现不同的样式。这个还是看个人的需求。

实现效果

通过上面的方法成功的实现了功能需求而且还可以扩展其他的样式。比如自定义列不同的样式实现多元化的展示。最终实现的效果如下。