React中动态控制Ant Design Table列的显示与隐藏
需求:动态控制Table列的显示与隐藏,当isAge为true时,显示年龄列
方法一:
import { useMemo } from 'react'
let isAge = false
const 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 = false
const 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 = false
const 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}
/>
效果图