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

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

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

现在有如下需求

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

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

以上图为例

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

a(自定义)

阅读 4.1k
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上做判断,判断为前端添加的数据则加上自定义。

代码如下:

        <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到 从后端查询返回的数据中

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题