Vue+element cascader combined selector three-level category dynamic loading

When a certain level is selected, the options under that level are dynamically loaded.
Only three categories are displayed in the html code box. Delete: show-all-levels=“false” and all paths will be displayed

<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 code buckleTemplateNext category interface name props is placed in 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)
            })
          }
        }

View front-end interview questions

Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_42981560/article/details/110429795