美文网首页Web前端之路react + dva + antdantd
Antd table的expandIcon属性,修改默认展开关闭

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

作者: 六二小盆友 | 来源:发表于2019-10-28 16:07 被阅读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

    相关文章

      网友评论

        本文标题:Antd table的expandIcon属性,修改默认展开关闭

        本文链接:https://www.haomeiwen.com/subject/ddybvctx.html