uniapp实现多级菜单选择u-select

 html

<button v-for='(item,index) in 5' :key="index" @click="changeSelectClass(index)">选择菜单</button>
//此组件可以根据children的深度自动增加子级菜单
<u-select @click="show = true" :default-value="defaultValue" 
    mode="mutil-column-auto" v-model="show" :list="classList" 
    value-name="id" @confirm="selectconfirm" 
    safe-area-inset-bottom>
</u-select>
//mode是列数，single-column是单列,mutil-column-auto是多列根据数组深度扩充
//其中value-name是自定义将id替换为原来的value这个值

js

{
    show:false,
    
    defaultValue:[1],//默认选中第二项，当点击确定按钮的时候设置默认选择菜单中的第几项
    classList:[
        {
            id: '1',
            label: 'first'
            children:[
                id:'11',
                label:'nice'
            ]
        },
        {
            id: '2',
            label: 'second',
            children:[
                id:'12',
                label:'niceSecond'
            ]
        },
        {
            id: '3',
            label: 'third',
            children:[
                id:'13',
                label:'niceThird'
            ]
        }
    ]
}

methods:{
    changeSelectClass(index) {
       console.log(index);
    },
    selectconfirm(e) {
       console.log(e);
    }
    

}