react中antd的表格自定义展开

antd的表格官方案例中给出的都是固定的图表展开，在做需求的时候，需要使用点击最后一列，然后出现展开内容，实现效果图如下

在最开始设置一个全局变量  const keys = [];
在设置列参数的函数中render个open函数
 {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            className: 'hotAaction hotZaction',
            render: (text, record) => <a href="javascript:void(0);" onClick={(e) => this.open(e, record)}>查看热度走势</a>

        }



 open = (e, record) => {

        if ($(e.target).parent().hasClass('hotZaction')) {
            keys.push(record.key);//点击的每一行的key的值保存下来。
            this.setState({
                arr: keys
            })
            e.target.innerHTML = '查看热度走势'
            $(e.target).parent().addClass('hotSaction');
            $(e.target).parent().removeClass('hotZaction');
        } else if (e.target.innerHTML === '查看热度走势') {
            keys.splice(keys.indexOf(record.key), 1);//再次点击的时候从数组删除上次存入的key值。
            this.setState({
                arr: keys
            })
            e.target.innerHTML = '查看热度走势'
            $(e.target).parent().addClass('hotZaction');
            $(e.target).parent().removeClass('hotSaction');
        }
    }


//表格设置展开行的函数

 <Table showHeader
                           className="components-table-demo-nested eventList"
                           columns={this.containerTableColumns}
                           dataSource={this.containerTableData}
                           expandedRowRender={this.getEcharts}
                           loading={loading}
                           pagination={false}
                           expandedRowKeys={this.state.arr}
                           rowKey={row => row.key}
                    />



    /*各个图表*/
    getEcharts = (record) => {
      //展开内容的逻辑，我这边是展开的内容是一个个的图表
        return (
            <div className={"hotEchar" + record.key}>
                <HotAnomaly />
            </div>

        )
    }
    }

然后你会发现在第一列还是有那个自带的展开的小图标在，没找到隐藏的方法，只能在css中进行隐藏了

　　参考了https://blog.csdn.net/qq_40959617/article/details/84332711

转载于:https://www.cnblogs.com/yesu/p/10913097.html