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

后端返回结果如: "[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;  
});  
Logo

前往低代码交流专区

更多推荐