Ant Design Table组件 控制表头的显示与隐藏

2024年2月1日 285次阅读 来源: ToBeOrNotToBe_Up

需求：当切换时间纬度的时候，表格需要增加某字段。即当统计纬度为时间A时，需要增加X字段，统计纬度为时间B的时候，不需要X字段

思路：根据时间纬度的状态，控制X字段的显示隐藏，从而增强Table组件的可复用性

//我们需求的那个字段columns
{  
	title: '字段X', 
	dataIndex: 'xCode',
	key: 'xCode', 
	filterType: props.isShowCodeX
}
//Table组件
<Table 
	columns={ columns.filter(item => item.filterType || item.filterType === undefined)}
    dataSource={ props.dataSource}
    pagination={ { 
      onChange: (e)=>{  props.onChange({  pageIndex: e })},
      total: props.total
    }}
/>
//组件外部调用
<MyTable 
	dataSource={ data} 
	onChange={ onChange} 
	total={ total} 
	isShowCodeX={ dateType === 'YYYY-MM-DD'}
/>
    原文作者：ToBeOrNotToBe_Up
    原文地址: https://blog.csdn.net/jasonzhang20100713/article/details/104832063
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞