【vue】element-ui、el-table使用V-for循环动态添加表头和数据

element-ui、el-table使用V-for循环动态添加表头和数据

tableHeader:'固定的表头'，

   
       {{ $t("NeoLight.empty") }}
   
    
    
    
    
         
        
            
             {{ $t("storagePos.yes") }}
        
    

data 中定义数据

 tableHeader: [{
        label: window.vm.$i18n.t("workOrder.ri"),
        prop: 'ri'
      }, {
        label: window.vm.$i18n.t("storagePos.mpn"),
        prop: 'mpn'
      },
      {
        label: window.vm.$i18n.t("solderPasteManager.pn"),
        prop: 'pn'
      },
      {
        label: window.vm.$i18n.t("workOrder.side"),
        prop: 'side'
      }
        , {
        label: window.vm.$i18n.t("workOrder.trolleyNumber"),
        prop: 'tableNo'
      }, {
        label: window.vm.$i18n.t("workOrder.stationInfo"),
        prop: 'feederInfo'
      }, {
        label: window.vm.$i18n.t("workOrder.needCount"),
        prop: 'needReelCount'
      }, {
        label: window.vm.$i18n.t("workOrder.outCount"),
        prop: 'outReelCount'
      }, {
        label: window.vm.$i18n.t("workOrder.demandQuantity"),
        prop: 'needNum'
      }, {
        label: window.vm.$i18n.t("workOrder.quantityIssued"),
        prop: 'outNum'
      }
      ],

表格中部分表头 需从接口返回的数据（appendData）中拿到

返回数据格式

组装数据

methods：{
  toDetail(inde, row) {
      this.dialogTableVisible = true;
      orderDetail(row.orderNo).then((res) => {
        let appendHeader = []
        // 找到所有的appendData的值 放到一个数组里
        let allAppendData = []
        let allKeys = []
        res.orderItems && res.orderItems.map(r => {
          allAppendData.push(r.appendData)
        })
        // 获取到数组中每一项的key值
        allAppendData.forEach((value, i) => { //数组循环
          for (var pl in value) { //数组对象遍历
            //获取key
            allKeys.push(pl)
          }
        })
        // 组装动态列新增的表头
        appendHeader = allKeys.map(k => {
          return {
            label: k,
            prop: k
          }
        })
        if (!this.isAdd) {
          this.tableHeader = this.tableHeader.concat(appendHeader)//组装b
          this.isAdd = true
        }
        res.orderItems && res.orderItems.map(r => {
          if (r.appendData) {
            const keys = Object.keys(r.appendData)
            keys.map(k => {
              r[k] = r.appendData[k]
            })
          } else {
            return r
          }
        })
        this.gridData = res.orderItems
      });
    },
 }

效果

点击需求单号 ，弹框

参考链接 https://blog.csdn.net/xz1589155358/article/details/126597271