Vue+element 级联选择器 编辑操作内容回显

场景一：后端返回的是字符串，但是其格式是数组类型

后端返回结果如: "[1,2,4,5]"

修改方法：

法一：遍历字符串，转成数组

因为数组是string类型的即 “[1,24,5]”

1. 将”[” 和 “]” ,substring

2. 将得到的字符串split(“,”),得到一个装有“1”，“24”，“5”的string数组

3. 循环拿出数组的每个元素转换成int类型，再push到option数组里,然后赋值给 selectedOptions

法二：使用JSON，将字符串直接转换成json对象

json会根据字符串的格式帮我们制动转换成相应的格式。

原理就是"[1,24,5]" 的[ 和 ]，后台穿过来的数据json字符串，json在转换成对象的时候，会根据[] 判断他是数组而非其他类型，于是我们就直接转成数组了，只要一行代码。

dataStrArr = JSON.parse(str);

下面是我的部分代码
html:

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

vue.js:

 created () {
   // 当是编辑框是，渲染页面
   if (this.isEdit) {
     getGoodsByID(this.$route.query.id).then(res => {
       if (res.meta.status !== 200) {
         return this.$message.error('根据商品ID获取商品信息失败')
       }
       this.goods = res.data
       // 商品分类级联框需要显示为文案
       const dataStrArr = JSON.parse(this.goods.goods_cat ) // 转为数组
       this.goods.goods_cat = dataIntArr
     })
   }
   // 获取商品分类，渲染级联选择器
   this.getCategories()
 },

核心：

 const dataStrArr = JSON.parse(this.goods.goods_cat)

场景二：后端返回的是纯字符串，以逗号分隔

后端返回结果："1,2,4,5"

解决

1. 先split，转换为数组，但是数据类型都是字符串
2. 把字符串数组转换成整型数组

比如有一个字符串：

const dataStr="1,2,3,4,5";

现在需要把它分割为int型数组：

let dataIntArr=[1,2,3,4,5];

let dataStrArr=dataStr.split(",");  //分割成字符串数组  
let dataIntArr=[];//保存转换后的整型字符串  

//方法一  
dataStrArr.forEach(item => {  
    dataIntArr.push(+item);  
});  
console.log(dataIntArr);  

//方法二  
dataIntArr=dataStrArr.map(item => {  
    return +item;  
});