avue-crud implementation example of multi-level complex dynamic header
|
Avue.js is a secondary encapsulation based on the existing element-ui library, which simplifies some tedious operations. The core concept is data-driven view. The main component library is for table and form scenarios. At the same time, it derives more commonly used components for enterprises to achieve a highly reusable, easy to maintain and expand framework. At the same time, it has built-in rich data display components to make development easier. PrefaceIn the actual development process, multi-level complex dynamic headers are required, and the content in the headers is dynamically filled. The following is the header style provided by the avuejs official website, so the data returned by my background needs to be spliced in the json format in avue-crud.
In actual development, it needs to be spliced into, column format.
column: [{
label: 'Name',
prop: 'name',
width:140,
}, {
label: 'Gender 1',
prop: 'sex',
},
{
label: 'Custom icon',
prop: 'icon',
type: "icon",
iconList: [{
label: 'Basic chart',
list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
}]
}, {
label: 'Complex header',
children: [{
label: 'Information',
children: [{
label: 'age',
prop: 'age'
}, {
label: 'Mobile phone number',
prop: 'phone',
}]
}, {
label: 'region',
prop: 'address',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl:'https://cli.avuejs.com/api/area/getProvince'
}]
}, {
label: 'test',
prop: 'test',
},
{
label: 'Mobile phone information 1',
prop: 'phone1'
}],
},
data: [{
name: 'Zhang San',
age: 14,
address: '110000',
phone1: '17547400800',
phone: '17547400800',
icon: 'el-icon-time',
test: 1,
sex: 'male'
}, {
name: 'Wang Wu',
age: 10,
address: '120000',
test: 1,
sex: 'female',
icon: 'el-icon-star-on',
phone1: '17547400800',
phone: '17547400800'
}]
Background data splicing
@GetMapping("/getTableHeader")
public R getTableHeaderJson(){
Map<String,Object> map = new HashMap<>();
StringBuilder sb = new StringBuilder();
sb.append("{label: 'Process',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: 'Unit price',prop: 'price" + pid + "'}, " +
"{label: 'Total', prop: 'sum" + pid + "'},{label: 'Completed quantity', prop: 'completeNum" + pid + "'}, " +
"{label: 'Qualification inspection qualified number', prop: 'qualifiedNum" + pid + "'}," +
" {label: 'Number of unqualified quality inspection', prop: 'unqualifiedNum" + pid + "'}, " +
"{label: 'Scrap quantity',prop: 'scrapNum" + pid + "'}]").append("},");
};
sb.append("]}");
map.put("cols",sb.toString());
return R.data(map);
}
Front-end data displayLoad the header information display in the create function
// Load created(){
this.getHeaderList();
},
//The information displayed on the loading page in method methods: {
getHeaderList(){
getHeaderFun().then(res => {
this.option.column.push(
{
label: "Product Name",
prop: "productName",
color:'#eef1f6'
},
{
label: "Product Code",
prop: "productCode",
},
{
label: "Material",
prop: "productMaterialStr",
},
{
label: "quantity",
prop: "sumNum",
},
{
label: "Number of outsourcing",
prop: "outNum",
},
{
label: "Outsourcing completion amount",
prop: "outCompleteNum"
},
{
label: "Total completed amount",
prop: "totalCompleteNum"
}
)
// Get the background splicing information let objs = eval("("+res.data.data.cols+")");
this.option.column.push(objs);
this.onLoad(this.page);
})
},
}
Loading data from a table
// The display of page data needs to correspond to the prop attribute of the background request 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 assigns the value to the corresponding property 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();
})
},
Page effect display
This is the end of this article about the implementation example of avue-crud multi-level complex dynamic header. For more related avue-crud multi-level complex dynamic header content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: A complete guide to some uncommon but useful CSS attribute operations
>>: Detailed explanation of global parameter persistence in MySQL 8 new features
Recommend
ie filter collection
IE gave us a headache in the early stages of deve...
Details on macrotasks and microtasks in JavaScript
Table of contents 1. What are microtasks? 2. What...
CSS Paint API: A CSS-like Drawing Board
1. Use Canvas images as CSS background images The...
Use of JavaScript sleep function
Table of contents 1.sleep function 2. setTimeout ...
Detailed explanation of the application of Docker Swarm in continuous integration testing
background The Agile model is widely used, and te...
How to install Linux system (Redhat8) and virtual machine network configuration in VMware
Table of contents 1. Install vmware 1.1 Download ...
How to install Android x86 in vmware virtual machine
Sometimes you just want to test an app but don’t ...
How to make CSS child elements highly consistent with parent elements
Absolute positioning method: (1) Set the parent e...
How to use time as a judgment condition in MySQL
Background: During the development process, we of...
Detailed explanation of transactions and indexes in MySQL database
Table of contents 1. Affairs: Four major characte...
A Deeper Look at the Differences Between Link and @import
There are three main ways to use CSS in a page: ad...
How to set up the terminal to run applications after Ubuntu starts
1. Enter start in the menu bar and click startup ...
Detailed explanation of the problem of mixed use of limit and sum functions in MySQL
Preface Today, after synchronizing the order data...
Detailed explanation and practical exercises of Mysql tuning Explain tool (recommended)
MySQL tuning Explain tool detailed explanation an...
React new version life cycle hook function and usage detailed explanation
Compared with the old life cycle Three hooks are ...