动态表头实现_magicodes动态定义表头-CSDN博客

本文链接：https://blog.csdn.net/ping_lvy/article/details/127765979

这篇博客主要介绍了如何根据页签切换来动态设置表格的表头字段，实现不同页面状态下的字段显示与隐藏。通过判断传入的状态参数，设置相应的字段隐藏属性，例如在'采购'状态下隐藏某些字段，在'招标'状态下则显示不同的字段。同时，代码中还展示了如何初始化所有字段为可见以及在切换页签时传入不同参数来更新显示状态。

摘要由CSDN通过智能技术生成

需求：切换页签表头的字段会不同

配试图时把所有字段都配上

获取试图时所有字段都为false

            if (column.field_code) {
              //表头设为false
              if (cusColumnObj[column.field_code]) {
                cusColumnObj[column.field_code].hide = false;
              } else {
                cusColumnObj[column.field_code] = { hide: false };
              }
            }

传参判断哪些字段显隐

    const biddingVsible = (status: any) => {
      console.log('status', status);
      for (const key in cusColumnObj) {
        if (Object.prototype.hasOwnProperty.call(cusColumnObj, key)) {
          cusColumnObj[key].hide = false;
        }
      }
      //用来判断一个属性是定义在对象本身而不是继承自原型链
      //或者obj.hasOwnProperty('prop');  
      if (status == 2) {
        //采购
        cusColumnObj.project_name.hide = true;
        cusColumnObj.bidding_date.hide = true;
        cusColumnObj.notice_date.hide = true;
        cusColumnObj.create_date.hide = true;
        cusColumnObj.operator_user_name.hide = true;
        cusColumnObj.bill_no.title = '采购编码';
      } else {
        //招标
        cusColumnObj.bill_no.title = '招标信息登记编码';
        cusColumnObj.purchase_name.hide = true;
        cusColumnObj.purchase_money.hide = true;
        cusColumnObj.agency_pro_name.hide = true;
        cusColumnObj.purchase_sort.hide = true;
        cusColumnObj.handle_date.hide = true;
        cusColumnObj.handle_person_name.hide = true;
        cusColumnObj.process_status.hide = true;
        console.log('cusColumnObj', cusColumnObj);
      }
    };

一进来就默认

biddingVsible(2);

切换页签的时候传不同的参数

    const tabChange = (tabs_status: any) => {
      if (tabs_status.value === '001') {
        biddingVsible(1);
      }else if (tabs_status.value === '007') {
        biddingVsible(2);
      }