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
W3C Tutorial (14): W3C RDF and OWL Activities
RDF and OWL are two important semantic web techno...
How to monitor the running status of docker container shell script
Scenario The company project is deployed in Docke...
Solve the error problem caused by modifying mysql data_dir
Today, I set up a newly purchased Alibaba Cloud E...
How to make your own native JavaScript router
Table of contents Preface Introduction JavaScript...
Vue3 implements Message component example
Table of contents Component Design Defining the f...
Nginx cache configuration example
When developing and debugging a web application, ...
How to use uni-app to display buttons and search boxes in the top navigation bar
Recently, the company is preparing to develop an ...
A brief discussion on the implementation of fuzzy query using wildcards in MySQL
In the MySQL database, when we need fuzzy query, ...
Simply understand the differences in the principles of common SQL delete statements
This article mainly introduces the differences be...
Detailed explanation of the error problem when setting the default value of 0000-00-00 in the date and datetime types of Mysql database
Phenomenon: After MySQL version 5.7, the default ...
A simple way to achieve scrolling effect with HTML tag marquee (must read)
The automatic scrolling effect of the page can be...
Detailed explanation of jQuery chain calls
Table of contents Chain calls A small case Chain ...
Detailed explanation of the underlying encapsulation of Java connection to MySQL
This article shares the Java connection MySQL und...
React.js framework Redux basic case detailed explanation
react.js framework Redux https://github.com/react...
Solve the problem of Docker starting Elasticsearch7.x and reporting an error
Using the Docker run command docker run -d -p 920...