element-ui select 多选 实现自定义option样式-爱代码爱编程

element-ui或者element-plus没有api来支持自定义多选option的样式，今天他来了，话不多说，直接上图。

 选择option，回显对应的标题和颜色 

1. created生命周期里面创建<style></style>标签

   created(){
      this.tagStyleElem =                                   
         window.document.head.appendChild(document.createElement('style'))
   }

   注：tagStyleElem 为自定义变量

2. 在select上绑定class样式和change事件

     <el-select
       v-model="value"
       multiple
       filterable
       class="tagStyle"
       placeholder="请选择标签"
       @change="change"
      >
       <el-option
         v-for="item in tagsList"
         :key="item.code"
         :label="item.name"
         :value="item.id"
       >
         {{ item.name }}
       </el-option>
     </el-select>

3. change事件里处理样式

// 选中替换option的样式
 change() {
//this.value 绑定的所选中的值
      this.tagStyleElem.innerHTML = this.value
        .map(
          (value, index) =>
            `.tagStyle .el-tag:nth-child(${index + 1}) 
            {
              color: rgb(${this.tagsList.find((item) => value == item.id)?.colour});
              border-color: rgb(${this.tagsList.find((item) => value == item.id)?.colour});
              background-color: rgba(${this.tagsList.find((item) => value == item.id)?.colour},0.1);
            }`
        )
    .join('')
 },

注：tagsList为option数据，找到其对应的id,更改其中的样式

总结：主体的思想就是拿到对应数据，更改每个子项的el-tag 的样式即可。