前言：
为了实现和pc端一样的下拉选择组件，目前插件市场上也没有相关组件，所以单独封装，以供大家学习参考
参数
| 参数 | 解释 | 默认 |
|---|---|---|
| multiple | 是否多选 | false |
| list | 传入选择的数据列表 | [] |
| label-key | 数据列表的展示字段 | 'label' |
| value-key | 数据列表的值 | "value" |
| title | 窗口标题 | '选择内容' |
| placeholder | 输入框提示文字 | '请输入' |
| clearable | 输入框是否显示可以清空按钮 | false |
| @confirm | 确认按钮的回调方法 | 必传 |
| @change | 单选的时候回调方法 | 单选必传 |
单选用法
<!-- 单选 -->
<ls-selectAlterWindow ref="singleSelctedRef" :multiple="false" :list="transferUserList" label-key="label"
value-key="value" placeholder="请输入进行检索" title="单选" clearable v-model="selectInfo.transferUserList"
@confirm="singleconfrom" @change="singleChange"></ls-selectAlterWindow>
//js
singleClick() {
this.$refs.singleSelctedRef.isShowModal = true;
},
singleconfrom(item) {
this.selectInfo.transferUserListName = '';
this.selectInfo.transferUserList = '';
},
singleChange(item) {
if (item) {
this.selectInfo.transferUserListName = item.label
} else {
this.selectInfo.transferUserListName = ""
}
},
多选用法
<!-- 多选 -->
<ls-selectAlterWindow ref="morelistRef1" :multiple="true" :list="morelist" label-key="label"
value-key="value" placeholder="请输入搜索" title="多选" clearable v-model="moreInfo.qySignUser"
@confirm="moreChange"></ls-selectAlterWindow>
moreClick(){
this.$refs.morelistRef1.isShowModal = true;
},
moreChange(item) {
this.moreInfo.qySignUserName = item ? item : [];
this.$forceUpdate()
},
最后：
附上插件市场地址：https://ext.dcloud.net.cn/plugin?name=ls-selectAlterWindow
