React中动态控制Ant Design Table列的显示与隐藏

需求：动态控制Table列的显示与隐藏，当isAge为true时，显示年龄列

方法一：

import {useMemo } from 'react'let isAge = falseconst data = [{name: '小明',sex: '男',age: '12',class: '4年级1班'}]const columns = useMemo(() => {const baseColumns = [{title: '姓名',dataIndex: 'name'},{title: '性别',dataIndex: 'sex'},{title: '班级',dataIndex: 'class'}]if (isAge) {// 在性别列后添加年龄列baseColumns.splice(2, 0, {title: '年龄',dataIndex: 'age'})}return baseColumns})<Table columns={columns} size="small" dataSource={data} />

方法二：（推荐）

let isAge = falseconst data = [{name: '小明',sex: '男',age: '12',class: '4年级1班'}]// 当isAge为false时,columns隐藏年龄列const columns = [{title: '姓名',dataIndex: 'name'},{title: '性别',dataIndex: 'sex'},isAge && {title: '年龄',dataIndex: 'age'},{title: '班级',dataIndex: 'class'}].filter(Boolean)// 当isAge为false时,columns需要去掉false项<Table columns={columns} size="small" dataSource={data} />

方法三：

let isAge = falseconst data = [{name: '小明',sex: '男',age: '12',class: '4年级1班'}]const columns = [{title: '姓名',dataIndex: 'name'},{title: '性别',dataIndex: 'sex'},{title: '年龄',dataIndex: 'age'},{title: '班级',dataIndex: 'class'}]<Table columns={//在这里做判断!isAge ? columns.filter((item) => item.dataIndex !== 'age') : columns} size="small"dataSource={data} />

效果图