加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react中antd的表格自定义展开

发布时间:2020-12-15 20:13:33 所属栏目:百科 来源:网络整理
导读:antd的表格官方案例中给出的都是固定的图表展开,在做需求的时候,需要使用点击最后一列,然后出现展开内容,实现效果图如下 在最开始设置一个全局变量 const keys = []; 在设置列参数的函数中render个open函数 { title: ‘操作‘,dataIndex: ‘action‘,key

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读