目前做了一个组件,用el-select远程搜索邮箱,并允许自定义邮箱
如下图所示:
图中除了a 其余的都是我从数据库查出来的
现在有如下需求
当输入的数据在数据库查不到时候
后面显示(自定义)等数据
以上图为例
图中的option 选项中就应该显示为:
a(自定义)
已解决
悬赏分:0
- 解决时间 2021-11-29 06:49
点赞 0反对 0举报 0
收藏 0
分享 0
回答2
最佳
-
贴下代码是最好的了。
一个办法是你可以使用计算属性来计算出select的选项,假设搜索得到的列表是list, 关键字是keyword, 在list前面加上这个a:
computed: { options () { if (!this.keyword) return this.list return [{ lable: `${this.keyword}(自定义)`, value: 'xxx' }].concat(this.list) } }
另一个方法是在el-option上做判断,判断为前端添加的数据则加上自定义。
支持 0 反对 0 举报2021-11-28 09:52
-
代码如下:
<el-select style="width:100%" v-model="postData.mailReceiver" multiple clearable @clear="clearMailReceiverStorage" :loading="loading" allow-create filterable remote default-first-option placeholder="请输入邮箱地址" :remote-method="remoteSearchMail" > <el-option v-for="item in options" :key="item.id" :label="item.email" :value="item.email"></el-option> </el-select>
经实验检测 allow-create 创建的数据并不是concat到 从后端查询返回的数据中
支持 0 反对 0 举报2021-11-28 11:09