需求:
1,先请求一个接口,获取级联选择器的第一层数据
2,根据点击的第一层数据中的某一条获取的id获取后台数据,渲染级联选择器的第二层数据
element demo:
element cascader的例子中数据都是在data中一次性写好的,即都有children属性,渲染第二层第三层等
第一个接口的数据
{
"msg": "success",
"code": 200,
"project": [
{
"_id": "5a62a7ae7438954940e7d924",
"dis": "",
"name": "统计分析"
},
{
"_id": "5a62a7b77438954940e7d927",
"dis": "",
"name": "材料字典"
},
{
"_id": "5a7badaf97d72d552404225e",
"dis": "",
"name": "业务数据"
},
{
"_id": "5ab84e008d4f7a1430ea0cb5",
"dis": "需要授权验证才可调用的接口,例如:三方集成等",
"name": "授权验证"
}
]
}
第二个接口根据选中第一个接口的_id获取第二个接口的数据,数据为:
"interface": [
{
"_id": "5a6346f00f5ef15a64dcccb8",
"finish": "2",
"sort": "0",
"name": "供应商供货明细",
"project": "5a62a7ae7438954940e7d924",
"group": "5a62aa727438954940e7d931",
"url": "/inspection/services/analyze/supply-details/query",
"remark": "",
"method": "POST"
}
]
实现说明
template
<el-cascader v-model="innerform.requestId" filterable clearable
@expand-change="handleItemChange"
@change="selectApi($event,innerform)" :options="interfaceOptions"
:props="props">
</el-cascader>
script
data(){
return {
interfaceOptions:[]
props:{
// props定义的值根据接口返回的数据定的
label:'name',
value:'_id',
children:'interface'
},
}
}
// create中获取第一层数据
created(){
getProject(){
this.$http.get('/autotest-admin/autotest/project').then(res => {
if(res.code===200){
this.interfaceOptions = res.project
this.interfaceOptions.forEach((item,index) => {
//添加属性
this.$set(this.interfaceOptions[index],'interface',[])
})
}else{
this.$message({
message:res.msg,
type:'warning'
})
}
})}
},
mounted:{
// 通过监听expand-change事件(当展开节点发生变化时触发)获取第二层数据,组装interfaceOptions数据
handleItemChange(val){
let value = val[0]
this.$http.get(`/autotest-admin/autotest/interface?project=${value}`).then(res => {
if(res.code===200){
const interfaceArr = res.interface || []
this.apiData = interfaceArr
for(let i = 0; i<this.interfaceOptions.length;i++){
if(this.interfaceOptions[i]._id === value){
this.$set(this.interfaceOptions[i], 'interface', interfaceArr)
break;
}
}
}
})
},
// 获取选择的值
selectApi(){
}
}