本文主要是介绍element-ui入门： cascader获取当前选择的整个对象，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
背景
先说下背景，因为要把国家的代码，区号和中英文名字都要动态的存放。
产品经理出了个需求，说是要手动填写对应的地区，国家编码这些信息。
说不清，先看下原型图。
其实国家这些信息都是固定好的，不需要填写。
然后我就从网上下载了一个国家编码对应的JSON文件。
然后存放到了vue文件中，做成了动态选择填充的形式。
这样的结果就是只要动一动手指，选择国家
然后国家的相关信息就都自动填充了。
这里用到了cascader。
用cascader的主要目的是因为国家太多了，根据国家的首字母。
进行了一个分组（就和您手机上的联系人的展示方式差不读）。
问题
cascader如何回显整个选中的对象？
因为cascader选中的话，只传递了对应的选中的值。
整个对象就没有办法进行传递赋值了。
导致自动填充的时候，就不能填充其它列了。
解决方案
关键的时候，还是要找官网。
官网提供了getCheckedNodes这个解决方案。
官方解释
| getCheckedNodes | 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组 | (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false |
直接调用getCheckedNodes方法，获取选中的节点的整个对象。
当然，你如果想获得级联的下级的话，也是可以的。
接下来就很简单了，直接找到对应的cascader对象。
然后调用getCheckedNodes方法。
结果果然很香。
可以把所有的内容都自动填充了
那个国家地区码可以直接下载：国家地区码对应表JSON
这篇关于element-ui入门： cascader获取当前选择的整个对象的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
