antd的表格官方案例中给出的都是固定的图表展开,在做需求的时候,需要使用点击最后一列,然后出现展开内容,实现效果图如下
在最开始设置一个全局变量 const keys = [];
在设置列参数的函数中render个open函数
{
title: ‘操作‘,
dataIndex: ‘action‘,
key: ‘action‘,
className: ‘hotAaction hotZaction‘,
render: (text, record) => this.open(e, record)}>查看热度走势
}
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‘);
}
}
//表格设置展开行的函数
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 (
)
}
}
然后你会发现在第一列还是有那个自带的展开的小图标在,没找到隐藏的方法,只能在css中进行隐藏了