element-ui入门： cascader获取当前选择的整个对象

忘是亡心i 2022-09-12 08:49 1198阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16][]

# 背景 #

先说下背景，因为要把国家的代码，区号和中英文名字都要动态的存放。

产品经理出了个需求，说是要手动填写对应的地区，国家编码这些信息。

说不清，先看下原型图。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

其实国家这些信息都是固定好的，不需要填写。

然后我就从网上下载了一个国家编码对应的JSON文件。

然后存放到了vue文件中，做成了动态选择填充的形式。

这样的结果就是只要动一动手指，选择国家

然后国家的相关信息就都自动填充了。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

这里用到了cascader。

用cascader的主要目的是因为国家太多了，根据国家的首字母。

进行了一个分组（就和您手机上的联系人的展示方式差不读）。

# 问题 #

cascader如何回显整个选中的对象？

因为cascader选中的话，只传递了对应的选中的值。

整个对象就没有办法进行传递赋值了。

导致自动填充的时候，就不能填充其它列了。

# 解决方案 #

关键的时候，还是要找官网。

官网提供了getCheckedNodes这个解决方案。

官方解释

<table> 
 <tbody> 
  <tr> 
   <td>getCheckedNodes</td> 
   <td>若节点可被选择（即&nbsp;<code>show-checkbox</code>&nbsp;为&nbsp;<code>true</code>），则返回目前被选中的节点所组成的数组</td> 
   <td>(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为&nbsp;<code>false</code>&nbsp;2. 是否包含半选节点，默认值为&nbsp;<code>false</code></td> 
  </tr> 
 </tbody> 
</table>

直接调用getCheckedNodes方法，获取选中的节点的整个对象。

当然，你如果想获得级联的下级的话，也是可以的。

接下来就很简单了，直接找到对应的cascader对象。

然后调用getCheckedNodes方法。

结果果然很香。

可以把所有的内容都自动填充了

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

那个国家地区码可以直接下载：[国家地区码对应表JSON][JSON]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/4e4a34f1abae423391df5f303fcb9b82.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/0a8c3ea6e0aa42f79ea6008a77551c05.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/c34fad66b9b14eb5a035d7b2be376b71.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/23d9ee014bd2440d86f8fd4ac7133ded.png
[JSON]: https://download.csdn.net/download/m290345792/24287483