vue+element cascader联选择器三级类目动态加载

前端技术栈

于 2020-12-01 13:47:33 发布

阅读量705

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42981560/article/details/110429795

vue 专栏收录该内容

52 篇文章

订阅专栏

博客围绕前端面试题查看展开，提到选中某一级时动态加载该级下选项，html代码框只显示三级类目，删除特定代码可显示全部路径，js代码中类目接口名及props放置位置等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当选中某一级时，动态加载该级下的选项。
html代码框里面只显示三级类目删除:show-all-levels=“false” 就会显示全部路径

<el-form-item label="商品类目：" v-if="navstate==-1">
    <el-cascader v-model="preSearchForm.class" :props="props" :show-all-levels="false"></el-cascader>
 </el-form-item>

js代码 buckleTemplateNext 类目接口名 props 是放在data里面

props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level,value } = node;
            buckleTemplateNext({pid:value || 0}).then(res=>{
              console.log(res)
              const nodes = res.map(x=>({
                value: x.id,
                label: x.name,
                leaf: level >= 2
              }))
              resolve(nodes)
            })
          }
        }