element-ui —— Cascader 级联选择器

前言：通常地址的选择都用级联选择器，但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 入坑小结

如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！