u-select的使用(多列联动)
2021-09-06 本文已影响0人
jing_bao
template
/*其中v-model 布尔值变量,用于控制选择器的弹出与收起
default-value 默认选中的下标
confirm-color 确认按钮的颜色
safe-area-inset-bottom 是否开启[底部安全区适配](https://www.uviewui.com/components/safeAreaInset.html#%E5%85%B3%E4%BA%8Euview%E6%9F%90%E4%BA%9B%E7%BB%84%E4%BB%B6safe-area-inset%E5%8F%82%E6%95%B0%E7%9A%84%E8%AF%B4%E6%98%8E)
mode 模式选择"mutil-column-auto"-多列联动模式
list 数组
label-name list数据的label属性名(用于显示)
value-name list数据的value属性名 (用于接口传参)
child-name list数据的children属性名,只对多列联动模式有效
confirm 点击确定按钮,返回当前选择的值
*/
<view @click="()=> show=true">请选择</view>
<u-select v-model="show" :default-value="index" confirm-color="#343bad" safe-area-inset-bottom="true" mode="mutil-column-auto" :list="array" value-name="areaCode" label-name="areaName" child-name="subRegions" @cancel="cancel" @confirm="bindPickerChange"></u-select>
script
list的格式 如下
array=[{
areaCode: 1,
areaName: '中国',
subRegions: [
{
areaCode: 2,
areaName: '广东'
},
{
areaCode: 5,
areaName: '广西'
}
]
},
{
areaCode: 8,
areaName: '美国',
subRegions: [
{
areaCode: 9,
areaName: '纽约'
}
]
}
]
export default{
name:'perfectData',
data(){
return{
show:false,
index: [0,0], //默认选中
array: [], //数组
provinceCode:'',//省
cityCode:'' //市
}
},
methods: {
// 选择任务分类
bindPickerChange: function(e) {
console.log('select发送选择改变,携带值为', e)
let value = e;
for (let i =0;i<this.array.length;i++){
if(this.array[i].areaName==value[0]['label']){
this.index[0] = i
let item = this.array[i]
for(let j=0;j<item['subRegions'].length;j++){
if(item['subRegions']['areaName']==value[1]['label']){
this.index[1] = j
}
}
}
}
this.title = value[0]['label']+','+value[1]['label']
this.provinceCode = value[0]['value']
this.cityCode = value[1]['value']
},
cancel(){}
}
}