1.下载插件导入到Hbuilder
下拉多选,完全仿照微信原生效果,简单美观可扩展,可在线体验 - DCloud 插件市场
2. 在页面使用组件
<view class="multiple-box" :class="['select', rc_person_manager_info.manage_type ? 'selected' : '']" @tap="handleMultiple(pickerIndex.manage_typeIndex)">{{getMultipleLabel(pickerList.manage_typeList,rc_person_manager_info.manage_type) || '请选择'}}<uni-icons class="rt" type="arrowdown" color="#bcbcbc"></uni-icons></view><multiple-picker title="请选择" :show="selectMultiple.show" :columns="pickerList.manage_typeList" :defaultIndex="pickerIndex.manage_typeIndex" @confirm="confirmMultiple" @cancel="selectMultiple.show = false"></multiple-picker>数据结构:
pickerIndex:{manage_typeIndex:[],},pickerList:{manage_typeList:[{label: '法人',value: 'FR'},{label: '实控人',value: 'SKR'},{label: '总经理',value: 'ZJL'},{label: '财务负责人',value: 'CW'},{label: '其他',value: 'QT'},],},
selectMultiple: {show: false,index: [],},
3.方法
handleMultiple(val) {console.log(val,'val');this.pickerIndex.manage_typeIndex = val || [];this.selectMultiple.show = true;},// 处理赋值存储为编码格式confirmMultiple(e) {let temp = [];e.selected.forEach(item => {temp.push(item.value);})console.log(e.value,'e.valuee.value');this.rc_person_manager_info.manage_type = temp.toString();this.pickerIndex.manage_typeIndex = e.value;this.selectMultiple.show = false;},// 多选获取对应值getMultipleLabel(list,value){let temp = []; //存放临时中文数组let tempList = value.split(',')tempList.forEach(item=>{list.forEach(item2 => {if(item2.value === item){temp.push(item2.label)}});})return temp != '' ? temp.toString() : '请选择';},// 多选获取对应编码getMultipleValue(list,label){let temp = []; //存放临时编码数组let tempList = label.split(',')tempList.forEach(item=>{list.forEach(item2 => {if(item2.label === item){temp.push(item2.value)}});})return temp != '' ? temp.toString() : '';},
4.格式数据
//数据库要存储编码
this.rc_person_manager_info.manage_type = this.getMultipleValue(this.pickerList.manage_typeList,data.manageType);
//页面默认选择时,数据显示了,但是对钩没有显示
this.pickerIndex.manage_typeIndex =this.getMultipleValue(this.pickerList.manage_typeList,data.manageType).split(',');