目录
- 前言
- 后台数据拼接
- 前台数据展示
- 页面效果展示
Avue.js 是基于现有的element-ui库进行的二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易.
前言
在实际开发过程，需要多级复杂的动态表头，表头中的内容是动态填充的。以下是avuejs官网提供的负责表头样式，因此我后台返回的数据，需要拼接avue-crud中的json格式。
实际开发中需要拼接成，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<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: '单价',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();
})
},
页面效果展示
到此这篇关于avue-crud多级复杂的动态表头的实现示例的文章就介绍到这了,更多相关avue-crud多级复杂的动态表头 内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码！
