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);//再次点击的时候从数组删除