Antd table的expandIcon属性,修改默认展开关闭按钮

在树形的table中,如果数据结构中的children的值是[ ],没有值,table还是会显示展开按钮,希望的结果的是没有children或是没有值就不显示展开按钮,就使用到expandIcon这个属性。
下面是我的例子


    customExpandIcon=(props)=> {
        if(props.record.children.length > 0){
            if (props.expanded) {
                return <a style={{ color: 'black',marginRight:8 }} onClick={e => {
                    props.onExpand(props.record, e);
                }}><Icon type="minus-square" style={{fontSize:16}}/></a>
            } else {
                return <a style={{ color: 'black' ,marginRight:8 }} onClick={e => {
                    props.onExpand(props.record, e);
                }}><Icon type="plus-square" style={{fontSize:16}}/></a>
            }
        }else{
            return <span style={{marginRight:8 }}></span>
        }
    }
      <Table bordered={ true }
                               loading={ loading }
                               columns={ columns }
                               dataSource={ dataList }
                               rowKey={(row) => { return row.value }}
                               pagination={ pagination }
                               expandIcon={(props) => this.customExpandIcon(props)}
                        />

代码中是判断了props,record的值。children是否有值,然后返回,如果没有就返回一个span。


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

推荐阅读更多精彩内容