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
Detailed explanation of MySql view trigger stored procedure
view: When a temporary table is used repeatedly, ...
Detailed steps for building a React application with a Rails API
Table of contents Backend: Rails API part Front-e...
How to solve the mysql error 1033 Incorrect information in file: 'xxx.frm'
Problem Description 1. Database of the collection...
Vue uses canvas handwriting input to recognize Chinese
Effect picture: Preface: Recently, I was working ...
Introduction to query commands for MySQL stored procedures
As shown below: select name from mysql.proc where...
Detailed steps for quick installation of openshift
The fastest way to experience the latest version ...
How to center your HTML button
How to center your HTML button itself? This is ea...
A brief analysis of the examples and differences of using nohup and screen to run background tasks in Linux
Using SSH terminal (such as putty, xshell) to con...
HTML uses regular expressions to test table examples
Here is an example code for using regular express...
Vue handwriting loading animation project
When the page is not responding, displaying the l...
Linux performance monitoring tool nmon installation and usage tutorial analysis
1. Introduction to nmon Nmon (Nigel's Monitor...
MySql import CSV file or tab-delimited file
Sometimes we need to import some data from anothe...
Detailed graphic description of the database installation process of MySQL version 5.7.24
MySQL is the most popular relational database man...
How to quickly install nginx under Windows and configure it to start automatically
Table of contents 1. Nginx installation and start...
Can Docker become the next "Linux"?
The Linux operating system has revolutionized the...