Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to realize avue-crud multi-level complex dynamic header". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian slowly and deeply to study and learn "how to realize avue-crud multi-level complex dynamic header" together.

Avue.js is based on the existing element-ui library for secondary packaging, so as to simplify some cumbersome operations, the core concept of data-driven view, the main component library for table tables and form scenarios, while deriving more commonly used components of enterprises, to achieve high reuse, easy maintenance and extension of the framework, while built-in rich data display components, making development easier.

preface

In the actual development process, multi-level complex dynamic headers are required, and the contents in the headers are dynamically filled. The following is the responsible header style provided by avuejs official website, so the data returned by my background needs to be spliced in json format in avue-crud.

实际开发中需要拼接成，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") public R getTableHeaderJson(){ Map map = new HashMap(); StringBuilder sb = new StringBuilder(); sb.append("{label: '工序',children: ["); List 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: '完成数量',prop: 'completeNum" + pid + "'}, " + "{label: '质检合格数量',prop: 'qualifiedNum" + pid + "'}," + " {label: '质检不合格数量',prop: 'unqualifiedNum" + pid + "'}, " + "{label: '报废数量',prop: 'scrapNum" + pid + "'}]").append("},"); }; sb.append("]}"); map.put("cols",sb.toString()); return R.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" } ) // 得到后台拼接的信息 let objs = 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 => { 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向相应的属性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(); }) },页面效果展示

Thank you for reading, the above is "avue-crud multilevel complex dynamic header how to achieve" content, after the study of this article, I believe that we have a deeper understanding of avue-crud multilevel complex dynamic header how to achieve this problem, the specific use of the situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.