利用elementui的级联选择器先请求第一级数据,当用户点击第一级节点时再根据点击节点的id请求它的子类并渲染
<el-cascader
clearable
placeholder="请选择"
v-model="form.dsdCode"
:props="cascaderProps"
></el-cascader>
export default {
data() {
return {
cascaderProps: {
// label: "goodsName",//当返回的数据字段不是label和value可以改成实际的字段比如goodsName
// value: "goodsCode",
// children: "options2"
lazy: true,
lazyLoad: this.lazyLoad
}
}
},
methods: {
lazyLoad(node, resolve) {
this.getData(node, resolve);
},
async getData(node, resolve) {
let that = this;
let level = node.level;
if (!node.data) {
await this.Api.vaccName().then(res => {//接口
const nodes = Array.from(res.data).map(item => ({
value: item.goodsCode,
label: `${item.goodsName}`,
leaf: level >= 1
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
});
} else {
await this.Api.vaccNameChild({ goodsCode: node.data.value }).then(
res => {
const nodes = Array.from(res.data).map(item => ({
value: item.goodsCode,
label: `${item.goodsName}`,
leaf: level >= 1
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}
);
}
},
}
}
二、第二种情况
<el-cascader
ref="cascader"
clearable
placeholder="请选择地区"
:props="cascaderProps"
v-model="areaCode"
@change="selectCityChange"
></el-cascader>
export default {
data() {
return {
cascaderProps: {
checkStrictly: true,//每一级都可以选择,小圆圈
lazy: true,
lazyLoad: this.lazyLoad,
}
}
},
methods:{
// 获取省市区
lazyLoad(node, resolve) {
console.log(node);
let { level } = node;
let params=''
if(level==0){
params='3200000000'//默认江苏省
}else{
params=node.value
}
this.Api.city({gbcode:params}).then(res=>{//接口
if(res&&res.code==200){
let data=[res.data]
if(level>0){
data=res.data.children
}
if(level==3){
data.forEach(item => {
item.leaf=level>=3
});
}
resolve(data);
}else{
this.$message.error('获取地区数据失败')
}
})
},
}
效果如下:
接口返回的数据:
点击江苏省返回的
点击无锡返回的:
//点击级联选择器label也可以选中
.el-cascader-panel .el-radio {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 10px;
right: -10px;
}
.el-cascader-panel .el-radio__input {
// visibility: hidden; //隐藏单选框,不隐藏就不用设置
}
.el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}