<el-cascader
placeholder="请选择地点"
:props="adressProps"
v-model="adressArray"
/>
data() {
return {
adressProps: {
lazy: true, //可以理解为开关,什么时候结束
lazyLoad: this.cascaderLazyLoad,
},
adressArray: null,
province: '',
city: '',
}
},
methods: {
cascaderLazyLoad(node, resolve) {
if (!node) {
return false
}
const { level } = node
//level代表当前点击选择哪一项,,比如0代表第一次进去加载数据,1是选择省后的操作
if (level == 1) {
this.province = node.value //选择省后对数据进行存储,因为要用省去查询市
} else if (level == 2) {
this.city = node.value //同上要去查询区
}
let params = {
province: this.province,
city: this.city,
}
getAdress(params).then((res) => { //换成你的接口方法
if (res.code === '0') {
resolve(
res.data.map((val) => {
return {
value: val,
label: val,
leaf: level >= 2, //因为省市区三项,所以第三次点击就不用在加载了,所以 >=2
}
})
)
}
})
},
}
取label 值
<div class="block">
<span class="demonstration">默认 click 触发子菜单</span>
<el-cascader
ref="cascaderAddr"
v-model="value"
:options="options"
@change="handleChange"
></el-cascader>
</div>
handleChange(value) {
console.log(value);
let nodeContent = this.$refs["cascaderAddr"].getCheckedNodes();
// 这种方式
// if (this.value.length != 0) {
// let arr = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels
// console.log('value', this.value)
// console.log('arr', arr)
// }
//这种方式
this.$nextTick(() => {
let casename = this.$refs["cascaderAddr"].presentText.split(
this.$refs["cascaderAddr"].separator
);
console.log("value:", casename);
});
// console.log(this.$refs['cascaderAddr'].getCheckedNodes())
},