前言：通常地址的选择都用级联选择器，但v-model绑定的值只有地区id，因为不是一维数组，通过id去反查对应的name很麻烦，如果能在@change触发事件中就能获取到相应name就再好不过了。于是小编就去度娘查了一些解决方案，结果控制台竟然报错，后来发现是Element版本的问题，记下来分享给大家~
级联地址的效果图
<el-cascader
ref="cascaderAddress"
class="cascader-box"
clearable
v-model="address"
:options="addressOptions"
@change="chgAddress"
:show-all-levels="false"
change-on-select
placeholder="请选择城市">
</el-cascader>
2.7.0 版本之前
可以用 this.$refs['cascaderAddress'].currentLabels 获取选中节点
2.7.0 版本之后
可以用 this.$refs['cascader'].getCheckedNodes() 获取选中节点
this.$refs['cascader'].currentLabels 在2.7版本给移除了 可以通过 this.$refs['件名'].getCheckedNodes() 获取到选中的节点
chgAddress (value) {
let arr = [];
// let arr = this.$refs['cascaderAddress'].getCheckedNodes()[0].pathLabels;
setTimeout(() => {
arr = this.$refs['cascaderAddress'][0].currentLabels;
});
// 遇到过打印this.$refs['cascaderAddress'][0]中currentLabels值是变化的，
// 但直接打印currentLabels值还是上一次更改的情况，所以加setTimeout处理
console.log(arr);
console.log(value);
},
console截图
思路：获取对应的NODE节点，节点里存储了相应的数据信息
感谢文档 element-ui cascader级联选择器,获取对象Object
如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
