element plus自定义select多选选中项展示标签

Element Plus是一个基于Vue.js的开源UI组件库，它提供了丰富的UI组件，包括Select（下拉选择框）组件。如果你想在Element Plus的Select组件上实现多选，并显示每个选中项的标签，可以按照以下步骤操作：

1. **安装Element Plus**:
首先确保已安装Vue及Element Plus，可以通过npm或yarn添加依赖：

   npm install vue@latest element-plus

2. **在模板中使用Select组件**:
使用`<el-select>`组件，并设置`multiple`属性为`true`以开启多选模式：

   <template>
     <el-select v-model="selectedOptions" multiple placeholder="请选择">
       <el-option
         v-for="(item, index) in options"
         :key="index"
         :label="item.label"
         :value="item.value"
       ></el-option>
     </el-select>
   </template>

3. **数据绑定与处理**:
在`data`选项中定义`selectedOptions`数组来存储选中的值，并`options`数组提供可选项及其标签：

   data() {
     return {
       selectedOptions: [],
       options: [
         { value: 'option1', label: '选项1' },
         { value: 'option2', label: '选项2' },
         // 更多选项...
       ]
     };
   }

4. **显示选中项标签**:
如果需要在选中项列表中显示标签，可以在`mounted`生命周期钩子中获取选中的标签并渲染到页面上，例如使用一个`<ul>`元素：

   <template>
     <div>
       <el-select ...></el-select>
       <ul ref="selectedTagsList">
         <li v-for="option in selectedOptions" :key="option.value">{{ option.label }}</li>
       </ul>
     </div>
   </template>

   mounted() {
     this.$refs.selectedTagsList.innerHTML = this.selectedOptions.map(item => item.label).join('<br>');
   }