el-cascader级联下拉框
el-cascader级联下拉框动态加载下一级数据、
1 | <el-cascader |
- props是更改默认展示的字段 默认是value label children
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111data(){
return{
otherParames:{
projectTypeCode:'',
},
oneLevelData:[],//一级级联数据
twoLevelData:[],
threeLevelData:[],
}
}
mounted(){
//初始化加载级联选择器第一级数据
this.getNodes();
},
methods:{
//获取级联选择器的当前点击的数据value
getCode(val) {
this.projectTypeId = val[val.length - 1];
this.getNodes(val);
},
getNodes(val){
let idArea;
let sizeArea;//当前点击的是第几级的数据
if (val) {
var len = val.length - 1;
this.otherParames.projectTypeCode = val[len];//当前级联选中节的id获取下一级数据所需要的传参
var labels = this.$refs["casca"].currentLabels;//当前级联的label文字
this.progressTableData[0].name = labels[len];
}
//页面初始化是没操作的数据 就默认请求第一级的数据 页面加载以操作节点运行
if (!val) {
idArea = null;
sizeArea = 0;
}else if (val.length === 1) {
idArea = val[0]
sizeArea = val.length //当前操作的是第一级节点
//因为存储了一级数据根据当前点击节点的id取出其余的字段值因为级联选择只能获取到value和label的值
for (let i = 0; i < this.oneLevel.length; i++) {
if(this.oneLevel[i].id == this.otherParames.projectTypeCode){
this.util= this.oneLevel[i].unit;
this.progressTableData[0].unit = this.util;
}
}
}else if (val.length === 2) {
idArea = val[1]
sizeArea = val.length // 3:一级 4:二级 6:三级
//要取值二级数据的话循环twoLevel
}else{
//要取值三级数据的话循环threeLevel
}
//如果操作的是第一级节点
if(sizeArea == 0){
this.$post('gantt','queryPlanPartList',{pid:"0"}).then(res=>{
if(res.code == 200){
var Items = JSON.parse(res.data);
this.oneLevel = Items;//将第一级数据存起来
this.cascaderData = Items.map((value, i) => {
return {
id: value.id,
name: value.name,
project: []
}
});
}
});
}else if(sizeArea == 1){ // 点击一级 加载二级
this.$post('gantt','queryPlanPartList',{pid:this.otherParames.projectTypeCode}).then(res=>{
if(res.code == 200){
var Items = JSON.parse(res.data);
this.cascaderData.map((value, i) => {
this.twoLevel = Items;//将第一级数据存起来
if (value.id === val[0]) {
if (!value.project.length) {
value.project = Items.map((value, i) => {
return {
id: value.id,
name: value.name,
project: []
}
})
}
}
})
}
})
}else if (sizeArea === 2) { // 点击二级 加载三级
this.$post('gantt','queryPlanPartList',{pid:this.otherParames.projectTypeCode}).then(res=>{
if(res.code == 200){
var Items = JSON.parse(res.data);
this.threeLevel = Items;//将第一级数据存起来
this.cascaderData.map((value, i) => {
if (value.id === val[0]) {
value.project.map((value, i) => {
if (value.id === val[1]) {
if (!value.project.length) {
value.project = Items.map((value, i) => {
return {
id: value.id,
name: value.name
}
})
}
}
})
}
})
}
})
}
},
}
