avue-crud多級(jí)復(fù)雜的動(dòng)態(tài)表頭的實(shí)現(xiàn)示例
更新時(shí)間：2021年12月12日 11:16:00 作者：程序媛ly
Avue.js?是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，本文主要介紹了avue-crud多級(jí)復(fù)雜的動(dòng)態(tài)表頭，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Avue.js 是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，從而簡(jiǎn)化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫針對(duì)table表格和form表單場(chǎng)景，同時(shí)衍生出更多企業(yè)常用的組件，達(dá)到高復(fù)用，容易維護(hù)和擴(kuò)展的框架，同時(shí)內(nèi)置了豐富了數(shù)據(jù)展示組件，讓開發(fā)變得更加容易.
前言
在實(shí)際開發(fā)過程，需要多級(jí)復(fù)雜的動(dòng)態(tài)表頭，表頭中的內(nèi)容是動(dòng)態(tài)填充的。以下是avuejs官網(wǎng)提供的負(fù)責(zé)表頭樣式，因此我后臺(tái)返回的數(shù)據(jù)，需要拼接avue-crud中的json格式。
實(shí)際開發(fā)中需要拼接成，column這種格式。
column: [{
label: '姓名',
prop: 'name',
width:140,
}, {
label: '性別1',
prop: 'sex',
},
{
label: '自定義圖標(biāo)',
prop: 'icon',
type: "icon",
iconList: [{
label: '基本圖表',
list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
}]
}, {
label: '復(fù)雜表頭',
children: [{
label: '信息',
children: [{
label: '年齡',
prop: 'age'
}, {
label: '手機(jī)號(hào)',
prop: 'phone',
}]
}, {
label: '地區(qū)',
prop: 'address',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl:'https://cli.avuejs.com/api/area/getProvince'
}]
}, {
label: '測(cè)試',
prop: 'test',
},
{
label: '手機(jī)信息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'
}]
后臺(tái)數(shù)據(jù)拼接
@GetMapping("/getTableHeader")
public R getTableHeaderJson(){
Map<String,Object> map = new HashMap<>();
StringBuilder sb = new StringBuilder();
sb.append("{label: '工序',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: '單價(jià)',prop: 'price" + pid + "'}, " +
"{label: '合計(jì)',prop: 'sum" + pid + "'},{label: '完成數(shù)量',prop: 'completeNum" + pid + "'}, " +
"{label: '質(zhì)檢合格數(shù)量',prop: 'qualifiedNum" + pid + "'}," +
" {label: '質(zhì)檢不合格數(shù)量',prop: 'unqualifiedNum" + pid + "'}, " +
"{label: '報(bào)廢數(shù)量',prop: 'scrapNum" + pid + "'}]").append("},");
};
sb.append("]}");
map.put("cols",sb.toString());
return R.data(map);
}
前臺(tái)數(shù)據(jù)展示
?在created函數(shù)中加載表頭信息展示
// created生命周期函數(shù)中加載
created(){
this.getHeaderList();
},
//method中加載頁面展示的信息
methods: {
getHeaderList(){
getHeaderFun().then(res => {
this.option.column.push(
{
label: "產(chǎn)品名稱",
prop: "productName",
color:'#eef1f6'
},
{
label: "產(chǎn)品代號(hào)",
prop: "productCode",
},
{
label: "材質(zhì)",
prop: "productMaterialStr",
},
{
label: "數(shù)量",
prop: "sumNum",
},
{
label: "外協(xié)數(shù)量",
prop: "outNum",
},
{
label: "外協(xié)完成量",
prop: "outCompleteNum"
},
{
label: "總完成量",
prop: "totalCompleteNum"
}
)
// 得到后臺(tái)拼接的信息
let objs = eval("("+res.data.data.cols+")");
this.option.column.push(objs);
this.onLoad(this.page);
})
},
}
加載表格中的數(shù)據(jù)
// 頁面數(shù)據(jù)的展示，需要于后臺(tái)請(qǐng)求的prop屬性對(duì)應(yīng)
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向相應(yīng)的屬性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();
})
},
頁面效果展示
到此這篇關(guān)于avue-crud多級(jí)復(fù)雜的動(dòng)態(tài)表頭的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)avue-crud多級(jí)復(fù)雜的動(dòng)態(tài)表頭 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中使用Openlayer實(shí)現(xiàn)加載動(dòng)畫效果
這篇文章主要介紹了Vue+Openlayer加載動(dòng)畫效果的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08
vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案
這篇文章主要介紹了vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的示例代碼
在當(dāng)今數(shù)字化的時(shí)代,用戶體驗(yàn)的優(yōu)化至關(guān)重要,物流信息的展示作為電商和供應(yīng)鏈領(lǐng)域中的關(guān)鍵環(huán)節(jié),其呈現(xiàn)方式直接影響著用戶對(duì)貨物運(yùn)輸狀態(tài)的感知和滿意度,所以本文介紹了Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的方法,需要的朋友可以參考下2024-08-08
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04
Vue3?vite配置css?的sourceMap及文件引用配置別名的過程
這篇文章主要介紹了Vue3 vite配置css的sourceMap,及文件引用配置別名的過程，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了淺談Vant-list?上拉加載及下拉刷新的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了關(guān)于單文件組件.vue的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
作為一個(gè)全棧開發(fā)人員,前端UI框架和網(wǎng)絡(luò)請(qǐng)求都得有基本的掌握,我以最簡(jiǎn)潔易懂的方式講解axios的使用和全局baseURL的配置2024-05-05