---

动态加载时获取value和label的值

前言

1、使用ref的getCheckedNodes方法获取label的值，change事件只传递value值；
2、回显自动处理，无需手动干预，设置好接口即可。

---

html

<el-cascader ref="refCascader" v-model="form.addressList" clearable :props="props" @change="changeCascader"></el-cascader>

---

JavaScript
data

data() {return {form: {addressList: null},props: {// 设置为动态加载模式lazy: true,// 配置value字段value: 'id',// 配置label字段label: 'name',lazyLoad(node, resolve) {const { level, data: { id = '' } } = node;let mapList = (list) => list.map(item => {// 设置层级(表示到了第三级便不再显示展开图标，点击也不再有加载动画)item.leaf = level >= 2;return item;});getAddrTree({ parentId: id }).then(re => resolve(mapList(re.response)));}}}
}

---

methods

changeCascader(event) {// 不明智的数据存储方式// let nodes = this.$refs.refCascader.getCheckedNodes()[0];// let [provinces, city, county] = nodes.pathLabels || [];// let [provincesId, cityId, countyId] = event || [];// this.form.provincesId = provincesId || '';// this.form.cityId = cityId || '';// this.form.countyId = countyId || '';// this.form.provinces = provinces || '';// this.form.city = city || '';// this.form.county = county || '';// 通用的数据存储方式let nodes = this.$refs.refCascader.getCheckedNodes()[0];this.form.ids = event.toString();this.form.label = nodes.pathLabels.toString();
}