el-select 自定义下拉菜单的底部 element-plus

这篇文章注意介绍 el-select 组件如何自定义下拉框底部菜单，可用于下拉框中添加属性等情况。

如果你使用的 element 版本在 2.4.3 以下，可以接着看下去，如果版本比较高，直接看后面高版本的操作。

低版本 2.4.3以下

效果图

代码

<template>
  <el-select
    v-model="data"
    placeholder="请选择"
    style="width: 240px"
    multiple
    collapse-tags
  >
    <el-option
      v-for="item in phoneList"
      :key="item"
      :label="item"
      :value="item"
      clear
      class="option-item"
    >
      <span>
        {{ item }}
      </span>
      <span v-show="data.indexOf(item) === -1" @click.stop="delPhone(item)">
        ×
      </span>
    </el-option>

    <!-- 加这行是防止选项数据为空数据时，下拉框显示无数据的情况 -->
    <el-option
      key="id"
      value="1"
      label="1"
      style="position: fixed; top: -100%; z-index: -11; opacity: 0"
    ></el-option>

    <div class="add-phone">
      <el-button v-if="!isAdding" bg size="small" @click="onAddOption"
        >添加手机号
      </el-button>
      <template v-else>
        <el-input
          v-model.trim="tempPhone"
          type="text"
          placeholder="请输入手机号"
          class="option-input"
          maxLength="11"
        />
        <div class="add-phone-button">
          <el-button type="primary" size="small" @click="addPhone">
            确定
          </el-button>
          <el-button size="small" @click="clear">取消</el-button>
        </div>
      </template>
    </div>
  </el-select>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const data = ref([]);
const phoneList = ref([]);

/**
 * onAddOption 显示添加手机号input框的方法
 * addPhone 添加手机号的方法
 * clear 添加手机号取消或添加成功时调用的方法
 */
const tempPhone = ref("");
const isAdding = ref(false);
const onAddOption = () => {
  isAdding.value = true;
};
const addPhone = () => {
  // 判断手机号是否已经存在
  if (phoneList.value.indexOf(tempPhone.value) !== -1) {
    return ElMessage.warning("手机号重复");
  }
  phoneList.value.push(tempPhone.value);
  tempPhone.value = "";
  isAdding.value = false;
};
const clear = () => {
  tempPhone.value = "";
  isAdding.value = false;
};

// 删除手机号
const delPhone = (item) => {
  phoneList.value = phoneList.value.filter((el) => el !== item);
  data.value = data.value.filter((el) => el !== item);
};
</script>

<style lang="scss">
.option-item {
  display: flex;
  justify-content: space-between;
}
.add-phone {
  padding: 10px 10px 0;
  border-top: 1px solid #cccccc;
  .add-phone-button {
    margin-top: 8px;
  }
}
</style>

高版本 2.4.3以上

element-plus 版本为 2.4.3 的话 element 组件有自带的插槽可以使用，效果如下，具体细节可以查看组件文章。

代码

<template>
  <el-select v-model="value" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    <template #footer>
      <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">
        Add an option
      </el-button>
      <template v-else>
        <el-input
          v-model="optionName"
          class="option-input"
          placeholder="input option name"
          size="small"
        />
        <el-button type="primary" size="small" @click="onConfirm">
          confirm
        </el-button>
        <el-button size="small" @click="clear">cancel</el-button>
      </template>
    </template>
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { CheckboxValueType } from 'element-plus'

const isAdding = ref(false)
const value = ref<CheckboxValueType[]>([])
const optionName = ref('')
const cities = ref([
  {
    value: 'Beijing',
    label: 'Beijing',
  },
  {
    value: 'Shanghai',
    label: 'Shanghai',
  },
  {
    value: 'Nanjing',
    label: 'Nanjing',
  },
  {
    value: 'Chengdu',
    label: 'Chengdu',
  },
  {
    value: 'Shenzhen',
    label: 'Shenzhen',
  },
  {
    value: 'Guangzhou',
    label: 'Guangzhou',
  },
])

const onAddOption = () => {
  isAdding.value = true
}

const onConfirm = () => {
  if (optionName.value) {
    cities.value.push({
      label: optionName.value,
      value: optionName.value,
    })
    clear()
  }
}

const clear = () => {
  optionName.value = ''
  isAdding.value = false
}
</script>

<style lang="scss" scoped>
.option-input {
  width: 100%;
  margin-bottom: 8px;
}
</style>

Select 选择器 | Element Plus (element-plus.org)https://element-plus.org/zh-CN/component/select.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E7%9A%84%E5%BA%95%E9%83%A8