avue-crud多级复杂的动态表头怎么实现(云服务器、云主机、高防IP、高防服务器、香港服务器、美国服务器,开发技术)

Avue.js 是基于现有的element-ui库进行的二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易.

前言

在实际开发过程，需要多级复杂的动态表头，表头中的内容是动态填充的。以下是avuejs官网提供的负责表头样式，因此我后台返回的数据，需要拼接avue-crud中的json格式。

实际开发中需要拼接成，column这种格式。

column:[{label:'姓名',prop:'name',width:140,},{label:'性别1',prop:'sex',},{label:'自定义图标',prop:'icon',type:"icon",iconList:[{label:'基本图表',list:['el-icon-time','el-icon-bell','el-icon-star-on']}]},{label:'复杂表头',children:[{label:'信息',children:[{label:'年龄',prop:'age'},{label:'手机号',prop:'phone',}]},{label:'地区',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'}]

后台数据拼接

@GetMapping("/getTableHeader") publicRgetTableHeaderJson(){ Map<String,Object>map=newHashMap<>(); StringBuildersb=newStringBuilder(); sb.append("{label:'工序',children:["); List<FactoryProcess>processList=factoryProcessService.list(); for(inti=0;i<processList.size();i++){ Stringpid=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:'完成数量',prop:'completeNum"+pid+"'},"+ "{label:'质检合格数量',prop:'qualifiedNum"+pid+"'},"+ "{label:'质检不合格数量',prop:'unqualifiedNum"+pid+"'},"+ "{label:'报废数量',prop:'scrapNum"+pid+"'}]").append("},"); }; sb.append("]}"); map.put("cols",sb.toString()); returnR.data(map); }

前台数据展示

在created函数中加载表头信息展示

//created生命周期函数中加载created(){this.getHeaderList();},//method中加载页面展示的信息methods:{getHeaderList(){getHeaderFun().then(res=>{this.option.column.push({label:"产品名称",prop:"productName",color:'#eef1f6'},{label:"产品代号",prop:"productCode",},{label:"材质",prop:"productMaterialStr",},{label:"数量",prop:"sumNum",},{label:"外协数量",prop:"outNum",},{label:"外协完成量",prop:"outCompleteNum"},{label:"总完成量",prop:"totalCompleteNum"})//得到后台拼接的信息letobjs=eval("("+res.data.data.cols+")");this.option.column.push(objs);this.onLoad(this.page);})},}

加载表格中的数据

//页面数据的展示，需要于后台请求的prop属性对应onLoad(page,params={}){this.loading=true;findProjectFormList(page.currentPage,page.pageSize,Object.assign(params,this.query)).then(res=>{constdata=res.data.data;this.page.total=data.total;//this.data=data.records;letrecords=data.records;letdataList=[];letprocessList=this.option.column[7].children;for(leti=0;i<records.length;i++){letobj={'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,}letprocessNumList=records[i].processNumList;for(letj=0;j<processNumList.length;j++){for(letk=0;k<processList.length;k++){if(processList[k].prop===processNumList[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);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();})},

页面效果展示