vue中使用elementUI 的级联选择器el-cascader实现动态加载
地点选择功能,省市区选择动态加载下一级。引入elementUI省略,自行查看文档。html部分<el-cascaderplaceholder="请选择地点":props="adressProps"v-model="adressArray"/>js部分data() {return {adressProps: {lazy: tr
·
地点选择功能,省市区选择动态加载下一级。
引入elementUI省略,自行查看文档。
html部分
<el-cascader
placeholder="请选择地点"
:props="adressProps"
v-model="adressArray"
/>
js部分
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
}
})
)
}
})
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)