利用elementui的级联选择器先请求第一级数据，当用户点击第一级节点时再根据点击节点的id请求它的子类并渲染
<el-cascaderclearableplaceholder="请选择"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-cascaderref="cascader"clearableplaceholder="请选择地区":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;}
