ant-design-vue Table组件自定义行样式

近期遇到了一个需求对于不同行的表格数据需要不同的样式,通过查询文档有两种实现的想法

  • 方法1:通过设置a-tablecustomRow,返回style
  • 方法2:通过设置a-tablerowClassName,对于不同的数据判断返回相应的class

方法2可以实现相关的功能没错,但是方法1文档提供的customRow返回的对象描述就比较模糊了

ant-design-vue Table组件自定义行样式_第1张图片
customRow用法

  • 需要改变样式的话只能猜想修改props里的内容,试了一下并没有用,于是看一下源码
    ant-design-vue Table组件自定义行样式_第2张图片
    customRow
  • 这里是定义了customRow的话就运行得到返回的对象,再调用工具方法与原先的props进行一个合并,原先的props包括一个class的前缀,vuex存的store数据,和table本身的rowKey属性

其实看到这里还是没有看懂props可以提供修改的属性到底是有哪些,原先猜想的是html标签的属性并不成立

ant-design-vue Table组件自定义行样式_第3张图片
原版antd的onRow
  • 通过查看antd的(鼻祖)React版本的话,它提供的是一个onRow方法,返回只有对应的事件,并没有props

感觉这个props并没有用

你可能感兴趣的:(ant-design-vue Table组件自定义行样式)