Avue.js 是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，從而簡化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動視圖,主要的組件庫針對table表格和form表單場景，同時衍生出更多企業(yè)常用的組件，達(dá)到高復(fù)用，容易維護和擴展的框架，同時內(nèi)置了豐富了數(shù)據(jù)展示組件，讓開發(fā)變得更加容易.

前言

在實際開發(fā)過程，需要多級復(fù)雜的動態(tài)表頭，表頭中的內(nèi)容是動態(tài)填充的。以下是avuejs官網(wǎng)提供的負(fù)責(zé)表頭樣式，因此我后臺返回的數(shù)據(jù)，需要拼接avue-crud中的json格式。

在這里插入圖片描述

實際開發(fā)中需要拼接成，column這種格式。

column: [{
            label: '姓名',
            prop: 'name',
            width:140,
          }, {
            label: '性別1',
            prop: 'sex',
          },
          {
            label: '自定義圖標(biāo)',
            prop: 'icon',
            type: "icon",
            iconList: [{
              label: '基本圖表',
              list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
            }]
          }, {
            label: '復(fù)雜表頭',
            children: [{
              label: '信息',
              children: [{
                label: '年齡',
                prop: 'age'
              }, {
                label: '手機號',
                prop: 'phone',
              }]
            }, {
              label: '地區(qū)',
              prop: 'address',
              type: 'select',
              props: {
                  label: 'name',
                  value: 'code'
              },
              dicUrl:'https://cli.avuejs.com/api/area/getProvince'
            }]
          }, {
            label: '測試',
            prop: 'test',
          },
          {
            label: '手機信息1',
            prop: 'phone1'
          }],
        },
        data: [{
          name: '張三',
          age: 14,
          address: '110000',
          phone1: '17547400800',
          phone: '17547400800',
          icon: 'el-icon-time',
          test: 1,
          sex: '男'
        }, {
          name: '王五',
          age: 10,
          address: '120000',
          test: 1,
          sex: '女',
          icon: 'el-icon-star-on',
          phone1: '17547400800',
          phone: '17547400800'
        }]

后臺數(shù)據(jù)拼接

@GetMapping("/getTableHeader")
	public R getTableHeaderJson(){
		Map<String,Object> map = new HashMap<>();
		StringBuilder sb = new StringBuilder();
		sb.append("{label: '工序',children: [");
		List<FactoryProcess> processList = factoryProcessService.list();
		for (int i = 0; i < processList.size(); i++) {
			String pid = processList.get(i).getProcessId();
			sb.append("{label:'" + processList.get(i).getProcessName() + "',prop:'" + pid + "',");
			sb.append("children:[{label: '單價',prop: 'price" + pid + "'}, " +
				"{label: '合計',prop: 'sum" + pid + "'},{label: '完成數(shù)量',prop: 'completeNum" + pid + "'}, " +
				"{label: '質(zhì)檢合格數(shù)量',prop: 'qualifiedNum" + pid + "'}," +
				" {label: '質(zhì)檢不合格數(shù)量',prop: 'unqualifiedNum" + pid + "'}, " +
				"{label: '報廢數(shù)量',prop: 'scrapNum" + pid + "'}]").append("},");
		};
		sb.append("]}");

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

		return R.data(map);
	}

前臺數(shù)據(jù)展示

?在created函數(shù)中加載表頭信息展示

// created生命周期函數(shù)中加載
created(){
      this.getHeaderList();
 },
//method中加載頁面展示的信息 
methods: {
      getHeaderList(){
        getHeaderFun().then(res => {
          this.option.column.push(
                 {
                   label: "產(chǎn)品名稱",
                   prop: "productName",
                   color:'#eef1f6'
                 },
                 {
                   label: "產(chǎn)品代號",
                   prop: "productCode",
                 },
                 {
                   label: "材質(zhì)",
                   prop: "productMaterialStr",
                 },
                 {
                   label: "數(shù)量",
                   prop: "sumNum",
                 },
                 {
                   label: "外協(xié)數(shù)量",
                   prop: "outNum",
                 },
                 {
                   label: "外協(xié)完成量",
                   prop: "outCompleteNum"
                 },
                 {
                   label: "總完成量",
                   prop: "totalCompleteNum"
                 }
          )
          // 得到后臺拼接的信息
          let objs =  eval("("+res.data.data.cols+")");
          this.option.column.push(objs);
          this.onLoad(this.page);
        })
      }, 
 }

加載表格中的數(shù)據(jù)

// 頁面數(shù)據(jù)的展示，需要于后臺請求的prop屬性對應(yīng)
onLoad(page, params = {}) {
        this.loading = true;
        findProjectFormList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          //this.data = data.records;

          let records = data.records;
          let dataList = [];
          let processList = this.option.column[7].children;
          for(let i = 0; i < records.length; i++ ) {
            let obj = {
              'productName' : records[i].productName,
              'productCode' : records[i].productCode,
              'productMaterialStr' : records[i].productMaterialStr,
              'sumNum' : records[i].sumNum,
              'outNum' : records[i].outNum,
              'outCompleteNum' : records[i].outCompleteNum,
              'totalCompleteNum': records[i].totalCompleteNum,
            }
            let processNumList = records[i].processNumList;
            for(let j = 0; j < processNumList.length; j++) {
              for (let k = 0; k < processList.length; k++) {
                if (processList[k].prop === processNumList[j].processCode) {
                // $set向相應(yīng)的屬性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);
                  this.$set(obj, 'scrapNum'+processNumList[j].processCode, processNumList[j].scrapNum);
                  this.$set(obj, 'shift'+processNumList[j].processCode, processNumList[j].shiftName);
                }
              }
            }
            dataList.push(obj);
          }
          this.data = dataList;

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

        })
      },

頁面效果展示

在這里插入圖片描述

到此這篇關(guān)于avue-crud多級復(fù)雜的動態(tài)表頭的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)avue-crud多級復(fù)雜的動態(tài)表頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: