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中進行隱藏了

　　參考了http://www.javashuo.com/article/p-wsxegpjb-gy.html