el-select选择框下拉列表添加自定义行_elselect 列表插入选项

el-select选择框下拉列表添加自定义行

示例：

实现：

<el-select
  v-model.trim="form.id"
  placeholder="请选择"
  :disabled="isDetail"
  clearable
  filterable
  style="width: 100%"
  @change="change($event)"
>
  <el-option
    v-for="item in list"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  />
  <div style="margin: 15px 0 10px 20px">
    没有找到想要的选项？
    <el-link
      type="primary"
      :underline="false"
      @click="add"
    >
      立即新增
    </el-link>
  </div>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意：这里存在一个坑！--> 当select列表为空时：自定义的这一行不会展示。

解决方案：

<el-select
  v-model.trim="form.id"
  placeholder="请选择"
  :disabled="isDetail"
  clearable
  filterable
  style="width: 100%"
  @change="change($event)"
>
  <el-option
    v-for="item in list"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  />
  <!-- 当列表为空时展示 -->
  <template slot="empty">
    <div style="margin: 15px 0 10px 20px">
      没有找到想要的选项？
      <el-link
        type="primary"
        :underline="false"
        @click="add"
      >
        立即新增
      </el-link>
    </div>
  </template>
  <!-- 当列表不为空时展示 -->
  <div style="margin: 15px 0 10px 20px">
    没有找到想要的选项？
    <el-link
      type="primary"
      :underline="false"
      @click="add"
    >
      立即新增
    </el-link>
  </div>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

注意：这里还有一个坑！--> 当select组件加上filterable搜索属性或者之前选中的值现在被删了、列表中不存在这一项的时候：这两行自定义行都会展示出来。

解决方案：

<el-select
  v-model.trim="form.name"
  value-key="name"
  placeholder="请选择"
  :disabled="isDetail"
  clearable
  filterable
  style="width: 100%"
  :filter-method="dataFilter"
  @change="change($event)"
>
  <el-option
    v-for="item in list"
    :key="item.name"
    :label="item.name"
    :value="item"
  />
  <!-- 当列表为空时展示  newList为所有列表，list为筛选后的结果 -->
  <template v-if="list.length === 0 || newList.length === 0" slot="empty">
    <div style="margin: 15px 0 10px 20px">
      没有找到想要的选项？
      <el-link
        type="primary"
        :underline="false"
        @click="add"
      >
        立即新增
      </el-link>
    </div>
  </template>
  <!-- 当列表不为空时展示 -->
  <div v-else style="margin: 15px 0 10px 20px">
    没有找到想要的选项？
    <el-link
      type="primary"
      :underline="false"
      @click="add"
    >
      立即新增
    </el-link>
  </div>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

---