Web前端之路react + dva + antdantd

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

2019-10-28  本文已影响0人  六二小盆友

在树形的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
上一篇 下一篇

猜你喜欢

热点阅读