element plus自定义select多选标签

Element Plus是一个基于Vue.js的轻量级UI组件库，它提供了一个易于定制的Select组件，支持多选功能。为了自定义这个多选Select标签，你可以按照以下步骤操作：

1. 引入组件：首先，在你的Vue项目里安装并引入`element-plus` Select组件，例如通过`npm install element-plus`。

<script setup>
import { Select } from 'element-plus';
</script>

<template>
  <div>
    <el-select v-model="selectedValues" multiple placeholder="请选择">
      <!-- 选项列表 -->
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

2. 定义状态：创建一个数据属性`selectedValues`用于存储用户选择的值，初始化为空数组。

<script setup>
import { ref } from 'vue';

const selectedValues = ref([]);
const options = [
  // ...你的选项对象数组
];
</script>

3. 自定义样式：如果你想改变外观，可以使用Vue的`ref()`或者`:class`绑定来添加CSS类。例如，给多选框添加一个`custom-class`。

<el-select
  v-model="selectedValues"
  multiple
  placeholder="请选择"
  class="custom-select"
></el-select>

然后在你的CSS文件中设置`.custom-select`的样式。

4. 功能扩展：如果需要更复杂的逻辑，如验证、事件处理等，可以在`v-model`的值变化时添加对应的函数。