需求：
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
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