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