You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
3.9 KiB
223 lines
3.9 KiB
<template>
|
|
<view>
|
|
<button @tap="handleTap('picker2')">点我弹出3级联动选择器</button>
|
|
<view>{{ value2.join('-') }}</view>
|
|
<lb-picker ref="picker2"
|
|
v-model="value2"
|
|
mode="multiSelector"
|
|
:list="list"
|
|
:level="3"
|
|
@change="handleChange"
|
|
@confirm="handleConfirm"
|
|
@cancel="handleCancel">
|
|
</lb-picker>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
value2: [],
|
|
label2: [],
|
|
list: [
|
|
{
|
|
label: '选项1',
|
|
value: '1',
|
|
children: [
|
|
{
|
|
label: '选项11',
|
|
value: '11',
|
|
children: [
|
|
{
|
|
label: '选项111',
|
|
value: '111'
|
|
},
|
|
{
|
|
label: '选项112',
|
|
value: '112'
|
|
},
|
|
{
|
|
label: '选项113',
|
|
value: '113'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '选项12',
|
|
value: '12',
|
|
children: [
|
|
{
|
|
label: '选项121',
|
|
value: '121'
|
|
},
|
|
{
|
|
label: '选项122',
|
|
value: '122'
|
|
},
|
|
{
|
|
label: '选项123',
|
|
value: '123'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '选项13',
|
|
value: '13',
|
|
children: [
|
|
{
|
|
label: '选项131',
|
|
value: '131'
|
|
},
|
|
{
|
|
label: '选项132',
|
|
value: '132'
|
|
},
|
|
{
|
|
label: '选项133',
|
|
value: '133'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '选项2',
|
|
value: '2',
|
|
children: [
|
|
{
|
|
label: '选项21',
|
|
value: '21',
|
|
children: [
|
|
{
|
|
label: '选项211',
|
|
value: '211'
|
|
},
|
|
{
|
|
label: '选项212',
|
|
value: '212'
|
|
},
|
|
{
|
|
label: '选项213',
|
|
value: '213'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '选项22',
|
|
value: '22',
|
|
children: [
|
|
{
|
|
label: '选项221',
|
|
value: '221'
|
|
},
|
|
{
|
|
label: '选项222',
|
|
value: '222'
|
|
},
|
|
{
|
|
label: '选项223',
|
|
value: '223'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '选项23',
|
|
value: '23',
|
|
children: [
|
|
{
|
|
label: '选项231',
|
|
value: '231'
|
|
},
|
|
{
|
|
label: '选项232',
|
|
value: '232'
|
|
},
|
|
{
|
|
label: '选项233',
|
|
value: '233'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '选项3',
|
|
value: '3',
|
|
children: [
|
|
{
|
|
label: '选项31',
|
|
value: '31',
|
|
children: [
|
|
{
|
|
label: '选项311',
|
|
value: '311'
|
|
},
|
|
{
|
|
label: '选项312',
|
|
value: '312'
|
|
},
|
|
{
|
|
label: '选项313',
|
|
value: '313'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '选项32',
|
|
value: '32',
|
|
children: [
|
|
{
|
|
label: '选项321',
|
|
value: '321'
|
|
},
|
|
{
|
|
label: '选项322',
|
|
value: '322'
|
|
},
|
|
{
|
|
label: '选项323',
|
|
value: '323'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '选项33',
|
|
value: '33',
|
|
children: [
|
|
{
|
|
label: '选项331',
|
|
value: '331'
|
|
},
|
|
{
|
|
label: '选项332',
|
|
value: '332'
|
|
},
|
|
{
|
|
label: '选项333',
|
|
value: '333'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
handleTap (picker) {
|
|
this.$refs[picker].show()
|
|
},
|
|
handleChange (item) {
|
|
console.log('change::', item)
|
|
},
|
|
handleConfirm (item) {
|
|
console.log('confirm::', item)
|
|
},
|
|
handleCancel (item) {
|
|
console.log('cancel::', item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|