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

原创已于 2022-10-20 11:28:52 修改 · 7.8k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

于 2022-10-18 14:03:43 首次发布

开发中问题总结专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在React中使用AntDesignTable根据isAge变量动态控制列的显示与隐藏，展示了三种方法，包括useMemo、列直接操作和Table组件的条件渲染。适合理解和实践React状态管理下表格组件的灵活性。

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} 
  />