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

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

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

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

customRow用法

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

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

原版antd的onRow
  • 通过查看antd的(鼻祖)React版本的话,它提供的是一个onRow方法,返回只有对应的事件,并没有props

感觉这个props并没有用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。