elementUI的cascader级联选择控件的默认值(回显)问题

傷城~ 2022-05-19 14:21 2436阅读 0赞

最近用到了elementUI的级联选择控件，级联选择控件的后台数据格式处理，和el-tree是完全一样的，不清楚的同学们，请看我专门写数据的那篇博客：[https://blog.csdn.net/java\_xxxx/article/details/81099437][https_blog.csdn.net_java_xxxx_article_details_81099437]。  
其实所谓回显，也只是默认值的问题。例如，一个省市联动，如果当一个用户修改自己信息的时候，那么他能看到级联选择的值，也就是说  
在修改页面我们给级联选择器赋值一个默认值就可以了。截图是官方文档  
![这里写图片描述][70]  
注意这里的:options=”options”是数组，而非字符串。而且里面的元素为值，只有是值（值一般都是元素的id）控件才能精确的匹配层级结构的数据。还有一个原因就是，我用的是@change方法，它选择元素后，控件自己默认的格式就是数组，然后数组里是每个元素的id。这样存的时候和取的时候的元素类型和格式的一样，控件才能正确的取出数据并显示。  
我在这里遇到了一个问题，就是，我保存的user对象里的address是一个string类型的，想当然的就赋值给了默认的options，alert弹出显示的也是\[1,24,5\]，感觉没啥问题，可是console.log()看数据的格式;或者更直接点alert(typeof address)打印出来的数据类型为string，于是问题找到了。  
将字符串变为数组赋值给默认的option，然后显示，就行了。问题是，首先我们的实体类中存储的是String，不可能因为前端需要就将实体类给改了，所以这里只能后台接到数据，然后返回给前端，前端再拿到数据在转换成数组赋值给option。

修改方法：

法一：（比较麻烦，但是几乎是万能的，所有的都可以转换成数组）  
因为数组是string类型的即 “\[1,24,5\]”  
1、将”\[” 和 “\]” ,substring  
2、将得到的字符串split(“,”),得到一个装有“1”，“24”，“5”的string数组  
3、循环拿出数组的每个元素转换成int类型，再push到option数组里,然后赋值给selectedOptions  
法二：  
以前我都是用法一，但是太麻烦了，后来一想js里不是有个JSON吗，我将字符串直接转换成json对象，  
json会根据字符串的格式帮我们制动转换成相应的格式，原理就是”\[1,24,5\]” 的”\[” 和 “\]”，后台穿过来的数据json字符串，json在转换成对象的时候，会根据这【】 判断他是数组而非其他类型，于是我们就直接转成数组了，只要一行代码。

app.selectedOptions=JSON.parse(str);

下面是我的部分代码  
html:

<el-cascader
                expand-trigger="hover"
                :props="defaultProps"
                :options="options"
                v-model="selectedOptions"  // 这个绑定的值就是默认显示的值
                @change="handleChange">
        </el-cascader>

js：

selectedOptions:[],
     $.ajax({
                   type:"get",
                   url:this.api.userData+"?id="+result,
                   dateType:"json",
                   contentType : 'application/json',
                   success:function(result){ 
                        app.user=result.data;
                        app.selectedOptions=JSON.parse(result.data.userAddress);
                   },
                   error:function(result){ 
                   }
               });

运行结果：  
![这里写图片描述][70 1]

ps：以后写代码还是要多思考，虽然有些功能能实现，但是要在功能实现过后想一想是否更简单的做法。

[https_blog.csdn.net_java_xxxx_article_details_81099437]: https://blog.csdn.net/java_xxxx/article/details/81099437
[70]: /images/20220519/01ae1ab7e207417b86055a207e83eec2.png
[70 1]: /images/20220519/94566e25864a4cb39e7b49ddfc077607.png