element ui select组件自定义data的问题?

目前做了一个组件,用el-select远程搜索邮箱,并允许自定义邮箱
如下图所示:
image.png

图中除了a 其余的都是我从数据库查出来的

现在有如下需求

当输入的数据在数据库查不到时候

后面显示(自定义)等数据

以上图为例

图中的option 选项中就应该显示为:

a(自定义)

已解决 悬赏分:0 - 解决时间 2021-11-29 06:49
反对 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