Umi & Ant Design Table组件expandable展开功能踩坑记录

React 的 Ant Design 的 Table 表格组件有一个 expandable 属性,是展开功能的配置。

其中有一个属性 expandedRowClassName ,官方的说明是展开的行,控制属性。但是我加了之后,怎么都渲染不出来。

expandable= {{
  expandedRowClassName: () => 'aaa',
}}

后面查资料说可以搭配 indentSize 属性使用。

indentSize :展示树形数据时,每层缩进的宽度,以 px 为单位。

加了之后,缩进是变了,但 className 还是没有渲染出来。

expandable: {
  expandedRowClassName: () => 'aaa',
  indentSize: 22,
}

直到和 expandedRowRender (额外的展开行)搭配使用才知道,expandedRowClassName 是给额外的展开行添加类名的。

expandable: {
  expandedRowRender: (record) => {
    return <span>{record.name}</span>;
  },
  expandedRowClassName: () => 'aaa',
  indentSize: 22,
}

这样也没才能渲染出来类名,不过不是我想要的,白折腾了。

table_expandable.png Umi & Ant Design Table组件expandable展开功能踩坑记录 经验总结

未经允许不得转载:w3h5 » Umi & Ant Design Table组件expandable展开功能踩坑记录

赞 (0)
分享到: +

评论 沙发

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)