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

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

运行结果:
elementUI的cascader级联选择控件的默认值(回显)问题_第2张图片

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

你可能感兴趣的:(ElementUI)