html code:

<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这个值

javascript code:

{
   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);
   }
}