uni-app——下拉框多选

 一、组件components/my-selectCheckbox.vue

<template>
	<view class="uni-stat__select">
		<span v-if="label" class="uni-label-text">{
  {label + '：'}}</span>
		<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
			<view class="uni-select" :style="{height:multiple?'100%':' 35px;'}"
				:class="{'uni-select--disabled':disabled}">
				<view class="uni-select__input-box" :style="{height:multiple?'100%':'35px;'}" @click="toggleSelector">
					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;" v-if="multiple&&current.length>0">
						<view class="tag-calss"
							v-for="(item,index) in collapseTags?current.slice(0,collapseTagsNum):current"
							:key="item[dataValue]">
							<span class="text">{
  {item[dataKey]}}</span>
							<view class="" @click.stop="delItem(item)">
								<uni-icons type="clear" style="margin-left: 4px;" color="#c0c4cc" />
							</view>
						</view>
						<view v-if="current.length>collapseTagsNum&&collapseTags" class="tag-calss">
							<span class="text">+{
  {current.length-collapseTagsNum}}</span>
						</view>
					</view>
					<view v-else-if="current&&current.length>0&&!filterable" class="uni-select__input-text">{
  {current}}
					</view>
					<input v-else-if="filterable" class="uni-select__input-text" type="text" style="font-size: 12px;"
						:placeholder="placeholderOld" v-model="current">
					<view v-else class="uni-select__input-text uni-select__input-placeholder">{
  {typePlaceholder}}</view>
					<uni-icons v-if="current && clear" type="clear" color="#c0c4cc" size="24" @click="clearVal" />
					<uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
				</view>
				<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
				<view class="uni-select__selector" v-if="showSelector">
					<view class="uni-popper__arrow"></view>
					<scroll-view scroll-y="true" class="uni-select__selector-scroll">
						<view class="uni-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
							<span>{
  {emptyTips}}</span>
						</view>
						<view v-else class="uni-select__selector-item"
							style="display: flex;justify-content: space-between;align-items: center;"
							v-for="(item,index) in filterMixinDatacomResData" :key="index" @click="change(item)">
							<span
								:class="{'uni-select__selector__disabled': item.disable}">{
  {formatItemName(item)}}</span>
							<uni-icons v-if="multiple&&currentArr.includes(item[dataValue])" type="checkmarkempty"
								color="#007aff" />
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * DataChecklist 数据选择器
	 * @description 通过数据渲染的下拉框组件
	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
	 * @property {String} value 默认值
	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
	 * @property {Boolean} clear 是否可以清空已选项
	 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
	 * @property {String} label 左侧标题
	 * @property {String} placeholder 输入框的提示文字
	 * @property {Boolean} disabled 是否禁用
	 * @event {Function} change  选中发生变化触发
	 */

	export default {
		name: "my-selectChec