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

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/java_xxxx/article/details/81218821

最近用到了elementUI的级联选择控件，级联选择控件的后台数据格式处理，和el-tree是完全一样的，不清楚的同学们，请看我专门写数据的那篇博客：https://blog.csdn.net/java_xxxx/article/details/81099437。
其实所谓回显，也只是默认值的问题。例如，一个省市联动，如果当一个用户修改自己信息的时候，那么他能看到级联选择的值，也就是说
在修改页面我们给级联选择器赋值一个默认值就可以了。截图是官方文档

注意这里的: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){
}
});

运行结果：

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

阅读更多