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

Question

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

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

现在有如下需求

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

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

以上图为例

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

a(自定义)

Answer 1

贴下代码是最好的了。

一个办法是你可以使用计算属性来计算出select的选项，假设搜索得到的列表是list, 关键字是keyword, 在list前面加上这个a：

computed: {
  options () {
    if (!this.keyword) return this.list
    return [{
      lable: `${this.keyword}（自定义）`,
      value: 'xxx'
    }].concat(this.list)
  }

}

另一个方法是在el-option上做判断，判断为前端添加的数据则加上自定义。

Answer 2

代码如下:

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