应用场景

博主刚刚在敲代码的时候,遇到了这样一个需求:列表中有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了,博主已经成功解决,

方案二

 {title: '费用', dataIndex: 'allPrice',
          colSpan:0,     //隐藏表头
          customRender: (value, row, index) => {
          debugger
            let obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.colSpan = 0;
            return obj;
          },
          customRender: (text, row, index,paramV4) => {
            const obj = {
              children: value,
               attrs: {},
            };
            if (paramV4.code1 != "1050") {
              obj.attrs.colSpan = 0;
            } else {
              obj.attrs.colSpan = 1;
            }
            return obj
          }
        },
        {title: '备注', dataIndex: 'remark'},

另外这个里面 可以加if 判断

 {title: '费用', dataIndex: 'allPrice',
          colSpan:0,     //隐藏表头
          customRender: (value, row, index,paramV4,title) => {
            let obj = {
              children: value,
              attrs: {},
              // title:'费用',
            };
            debugger
            console.log(this.paramV4.code1)
              if (this.paramV4.code1 != "1050") {
                obj.attrs.colSpan = 0;
              } else {
                obj.attrs.colSpan = 1;
              }
            // obj.attrs.colSpan = 0;
            return obj;
            }
            },

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐