antd table动态控制指定列的显隐

应用场景

博主刚刚在敲代码的时候,遇到了这样一个需求:列表中有A,B,C三列,如果B没有数据的时候,将B隐藏。什么鬼,博主使用的是antd3.0版本,用的最基础的Table插件。

解决方案

在column中动态添加B列,拿到数据以后,判断列表中B是否有数据,没数据不作处理,有数据动态添加B列属性到column中。
上代码!!!

// 先将含有A,C的column写好
column = [
        {
            title: '商品名1',
            dataIndex: 'A',
            key: 'A',
            width: 180,
        },
        {
            title: '商品名3',
            dataIndex: 'C',
            key: 'C',
            width: 150,
        }
 ]
 
 //在接口返回的数据中判断,如果B属性存在,就添加B列
if(data.length > 0 && data[0].B){
// 用splice方法,把B元素插入到指定位置
     this.column.splice(1, 0,{
          title: '商品名2',
          dataIndex: 'B',
          key: 'B',
      });
  }
  // 数据处理完以后setState一下,页面要重新渲染
  this.setState({    
    data: data
  })

这样既有ok了,博主已经成功解决,开始抖脚了。

你可能感兴趣的:(antd,reactjs)