複数レベルの複雑な動的ヘッダーの avue-crud 実装例

カラム： [{
            ラベル: '名前',
            プロパティ: '名前',
            幅:140,
          }, {
            ラベル: '性別 1'、
            小道具: 'セックス',
          },
          {
            ラベル: 'カスタムアイコン'、
            プロパティ: 'アイコン',
            タイプ: "アイコン",
            アイコンリスト: [{
              ラベル: '基本チャート'、
              リスト: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
            }]
          }, {
            ラベル: '複雑なヘッダー'、
            子供たち： [{
              ラベル: '情報'、
              子供たち： [{
                ラベル: '年齢'、
                プロパティ: '年齢'
              }, {
                ラベル: '携帯電話番号'、
                プロップ: '電話',
              }]
            }, {
              ラベル: '地域',
              プロパティ: 'アドレス',
              タイプ: '選択'、
              小道具: {
                  ラベル: '名前',
                  値: 'コード'
              },
              dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
            }]
          }, {
            ラベル: 'テスト'、
            プロパティ: 'テスト'、
          },
          {
            ラベル: '携帯電話情報1'、
            プロパティ: 'phone1'
          }],
        },
        データ： [{
          名前: '張三'、
          年齢: 14歳
          住所: '110000',
          電話1: '17547400800',
          電話番号: '17547400800',
          アイコン: 'el-icon-time',
          テスト: 1,
          性別: '男性'
        }, {
          名前: '王武'、
          年齢: 10歳
          住所: '120000',
          テスト: 1,
          性別: 「女性」、
          アイコン: 'el-icon-star-on',
          電話1: '17547400800',
          電話番号: '17547400800'
        }]

@GetMapping("/getTableHeader")
	パブリックR getTableHeaderJson(){
		Map<String,Object> map = new HashMap<>();
		StringBuilder sb = 新しい StringBuilder();
		sb.append("{label: 'プロセス',children: [");
		リスト<FactoryProcess> processList = factoryProcessService.list();
		(int i = 0; i < processList.size(); i++) の場合 {
			文字列 pid = processList.get(i).getProcessId();
			sb.append("{label:'" + processList.get(i).getProcessName() + "',prop:'" + pid + "',");
			sb.append("children:[{label: '単価',prop: '価格" + pid + "'}, " +
				"{ラベル: '合計'、プロパティ: '合計" + pid + "'}、{ラベル: '完了した数量'、プロパティ: 'completeNum" + pid + "'}、" +
				"{label: '資格検査資格番号', prop: 'qualifiedNum" + pid + "'}," +
				" {label: '不適格な品質検査の数'、prop: 'unqualifiedNum" + pid + "'}, " +
				"{label: 'スクラップ数量',prop: 'scrapNum" + pid + "'}]").append("},");
		};
		sb.append("]}");

		map.put("列",sb.toString());

		R.data(map) を返します。
	}

// created(){ をロードする
      ヘッダーリストを取得します。
 },
//メソッドの読み込みページに表示される情報: {
      ヘッダーリストを取得する(){
        getHeaderFun().then(res => {
          このオプション列をプッシュ(
                 {
                   ラベル: "製品名",
                   プロパティ: "productName",
                   色:'#eef1f6'
                 },
                 {
                   ラベル: "製品コード"、
                   プロパティ: "productCode",
                 },
                 {
                   ラベル: 「素材」、
                   プロパティ: "productMaterialStr",
                 },
                 {
                   ラベル: "数量",
                   プロパティ: "sumNum",
                 },
                 {
                   ラベル: 「アウトソーシング件数」、
                   プロパティ: "outNum",
                 },
                 {
                   ラベル: 「アウトソーシング完了額」、
                   プロパティ: "outCompleteNum"
                 },
                 {
                   ラベル: 「合計完了金額」、
                   プロパティ: "totalCompleteNum"
                 }
          ）
          // 背景のスプライシング情報を取得します。let objs = eval("("+res.data.data.cols+")");
          this.option.column.push(objs);
          this.onLoad(このページ);
        })
      }, 
 }

// ページデータの表示はバックグラウンドリクエストのprop属性に対応している必要があります onLoad(page, params = {}) {
        this.loading = true;
        findProjectFormList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          定数データ = res.data.data;
          this.page.total = データ.total;
          // this.data = data.records;

          records = data.records とします。
          データリストを [] にします。
          processListをthis.option.column[7].childrenとします。
          for(let i = 0; i < records.length; i++ ) {
            obj = {
              'productName' : records[i].productName,
              'productCode' : records[i].productCode,
              'productMaterialStr' : records[i].productMaterialStr,
              'sumNum' : レコード[i].sumNum,
              'outNum' : レコード[i].outNum,
              'outCompleteNum' : レコード[i].outCompleteNum、
              'totalCompleteNum': レコード[i].totalCompleteNum、
            }
            processNumList = records[i].processNumList;とします。
            for(j = 0; j < processNumList.length; j++) {
              (k = 0; k < processList.length; k++) の場合 {
                プロセスリスト[k].prop === プロセス番号リスト[j].processCodeの場合{
                // $set は対応するプロパティに値を割り当てます。prop this.$set(obj, 'price'+processNumList[j].processCode, processNumList[j].processPrice);
                  this.$set(obj, 'sum'+processNumList[j].processCode, processNumList[j].processTotal);
                  this.$set(obj, 'completeNum'+processNumList[j].processCode, processNumList[j].completeNum);
                  this.$set(obj, 'qualifiedNum'+processNumList[j].processCode, processNumList[j].qualifiedNum);
                  this.$set(obj, 'unqualifiedNum'+processNumList[j].processCode, processNumList[j].unqualifiedNum);
                  これを$set(obj, 'scrapNum'+processNumList[j].processCode, processNumList[j].scrapNum);
                  this.$set(obj, 'shift'+processNumList[j].processCode, processNumList[j].shiftName);
                }
              }
            }
            データリストをプッシュします。
          }
          this.data = データリスト;

          this.loading = false;
          this.selectionClear();

        })
      },