vue3中使用cascader级联选择器

最新推荐文章于 2024-06-26 17:41:58 发布

桃桃泡泡

最新推荐文章于 2024-06-26 17:41:58 发布

阅读量1.6k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_56541403/article/details/129127717

版权

文章讲述了在Vue3使用组合式API时，如何处理后台返回的数据并将其正确绑定到级联选择器（Cascader）中。作者遇到的问题是数据无法正常显示，通过调试和学习，发现并修复了数据处理和数组叠加的错误，强调了编程时的专注与细心的重要性。

摘要由CSDN通过智能技术生成

我用的是vue3组合式，这里要实现的是如图的效果：

html部分代码如下：

  <div class="part_two">
    <p>操作系统</p>
    <el-cascader :options="sysoptions" v-model="config.imageId" :show-all-levels="false" />
  </div>

后端返回的数据是这样格式的：（这里我就简单把数据格式展示一下了，而且是我有用到的数据，没有截图，反正就照葫芦画瓢吧）

[  
  { 
     id:'',
     name:'',
     images: 
        [ 
         { id:'', name:'' }  
        ] 
  },
  {
     id:'',
     name:'',
     images: 
        [ 
         { id:'', name:'' } 
        ] 
  } 
]

js代码：

const sysoptions = reactive([])// 操作系统的集合（这里已经是空数组了噢~）

// 请求操作系统
function getOperation() {
  const params = { zone_id: config.zoneId, region_id: config.regionId }//传的参数
  sysoptions.length = 0 //数组长度清零（我这里不清零的话数据会叠加）
  service.getOSList(params).then((res) => {
    if (res.code === 0) {
       //把请求到的数据，处理后放入sysoptions数组中（这里一开始写的时候，不小心多包了一层数组，你们写的时候也要认真点噢~）
      sysoptions.push(...res.data.items.map(({ id, name, images }) => (
        {
          value: id,
          label: name,
          //这里注意可别写错了！！！
          children: images.map(({ id, name }) => ({
            value: id,
            label: name
          }))
        }
      )))
    }
    config.imageId = sysoptions[0].children[0].value //设置的默认选中项（这个不一定要有）
  })
}

好像是第一次用到级联选择器，一开始以为很简单，直接套用就可以了，但是写的时候才发现，请求的数据放不进去。显示不出来，就总感觉差那么一点就实现了，然后又百度了看看怎么回事，最后照葫芦画瓢写出来了。

总结一下：照葫芦画瓢的时候也要认真写，不然就容易进到一个迷茫区（我就是这样，搞了几个小时才发现自己的粗心大意，所以写代码的时候一定要专注！！！周一的上午真就是很难专注，唉，我还需要多努力啊）