Vue3原生Element Plus Select组件改造：在下拉框里添加按钮，一次性实现增删改查！

自定义 Element Plus Select 组件，在下拉框中轻松添加新增按钮

在 Vue3 项目中扩展下拉框组件，实现 CRUD 操作

前言

在 Vue3 项目中，Element Plus 的 Select 组件是处理数据选择和表单交互的强大工具。然而，有时我们需要在下拉框中添加一个新增按钮，以便用户能够直接创建新数据，而无需跳转到其他页面或打开对话框。本博客将详细介绍如何扩展 Vue3 原生 Element Plus Select 组件，实现这个强大的功能，让你轻松构建出色的 Vue3 应用。

需求分析

我们希望实现一个扩展的 Select 组件，满足以下需求：

• 在下拉框中添加一个新增按钮，用于创建新数据。
• 点击新增按钮时，在下拉框下方弹出一个小窗口，用户可以在其中输入数据。
• 用户在小窗口中输入数据并点击保存按钮时，将新数据添加到下拉框选项中。
• 用户选择下拉框中的某一项时，将该项的数据显示在小窗口中。
• 用户在小窗口中修改数据并点击保存按钮时，将更新下拉框中相应选项的数据。
• 用户在小窗口中点击删除按钮时，将从下拉框选项中删除该项。

代码实现

1. 准备工作

首先，在 Vue 项目中安装 Element Plus 组件库：

npm install element-plus

在 main.js 文件中引入 Element Plus 组件库：

import Vue from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

Vue.use(ElementPlus)

2. 创建自定义 Select 组件

接下来，我们创建一个自定义的 Select 组件，继承 Element Plus 原生的 Select 组件：

// CustomSelect.vue
<template>
  <el-select v-model="value" @change="handleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    <el-option-group
      v-if="showAddOption"
      label="新增"
    >
      <el-option
        value="new"
        label="新增"
      >
        <template #slot>
          <span>+</span>
          <span>新增</span>
        </template>
      </el-option>
    </el-option-group>
  </el-select>
</template>

<script>
export default {
  name: 'CustomSelect',
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      showAddOption: false,
      newOption: {
        value: '',
        label: ''
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value)
      if (value === 'new') {
        this.showAddOption = true
        this.$nextTick(() => {
          this.$refs.newOptionInput.focus()
        })
      } else {
        this.showAddOption = false
      }
    },
    handleAddOption() {
      if (this.newOption.value && this.newOption.label) {
        this.options.push(this.newOption)
        this.value = this.newOption.value
        this.showAddOption = false
        this.$emit('add-option', this.newOption)
      }
    }
  }
}
</script>

3. 使用自定义 Select 组件

现在，我们可以使用这个自定义的 Select 组件了：

// App.vue
<template>
  <div>
    <custom-select
      :options="options"
      v-model="value"
      @add-option="handleAddOption"
    />
  </div>
</template>

<script>
import CustomSelect from '@/components/CustomSelect.vue'

export default {
  name: 'App',
  components: {
    CustomSelect
  },
  data() {
    return {
      options: [
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橘子' }
      ],
      value: 'apple'
    }
  },
  methods: {
    handleAddOption(option) {
      console.log('新增选项：', option)
    }
  }
}
</script>

4. 样式优化

为了使下拉框更加美观，我们可以添加一些样式：

// style.css
.el-select {
  width: 200px;
}

.el-select .el-input {
  padding-right: 30px;
}

.el-select .el-option-group__content {
  padding: 0;
}

.el-select .el-option-group__header {
  background-color: #f5f5f5;
  padding: 5px 10px;
}

.el-select .el-option--disabled {
  color: #999;
}

.el-select .el-option--new {
  color: #409eff;
}

.el-select .el-option--new .el-icon-plus {
  margin-right: 5px;
}

常见问题解答

1. 如何限制新增选项的长度？

在 CustomSelect.vue 中，对 newOption 对象的 value 和 label 属性添加长度限制即可。

data() {
  return {
    ...
    newOption: {
      value: '',
      label: ''
    }
  }
},
methods: {
  ...
  handleAddOption() {
    if (this.newOption.value.length > 10 || this.newOption.label.length > 15) {
      this.$message.error('选项长度过长')
      return
    }
    ...
  }
  ...
}

2. 如何设置新增选项的默认值？

在 CustomSelect.vue 的 data() 函数中设置 newOption 对象的默认值即可。

data() {
  return {
    ...
    newOption: {
      value: '',
      label: '新选项'
    }
  }
},

3. 如何在创建新选项后自动选择它？

在 CustomSelect.vue 的 handleAddOption() 方法中，设置 value 为 newOption.value 即可。

handleAddOption() {
  ...
  this.value = this.newOption.value
  ...
}

4. 如何使用键盘快捷键创建新选项？

在 CustomSelect.vue 中，添加一个键盘监听事件即可。

mounted() {
  document.addEventListener('keydown', this.handleKeyDown)
},
beforeDestroy() {
  document.removeEventListener('keydown', this.handleKeyDown)
},
methods: {
  ...
  handleKeyDown(e) {
    if (e.key === 'Enter' && this.showAddOption) {
      this.handleAddOption()
    }
  }
  ...
}

5. 如何将新选项的数据发送到父组件？

在 CustomSelect.vue 中，使用 $emit 方法触发 add-option 事件，并传递新选项数据作为参数即可。

handleAddOption() {
  ...
  this.$emit('add-option', this.newOption)
  ...
}

结语

本博客详细介绍了如何扩展 Vue3 原生 Element Plus Select 组件，在下拉框中添加一个新增按钮。通过自定义组件和样式优化，我们可以轻松实现新增、编辑、更新和删除等操作，提升用户交互体验。希望这篇文章对大家有所帮助。