根据业务需要自定义下拉组件样式（比如不同的状态颜色）的思考和实现

业务背景

• 全局使用的查询表单的各种封装，目前需要支持下拉select可以自由配置颜色，与列表中的状态颜色显示一致，提高用户体验
• 需实现如图更直观
  

思路分析

• 本质是实现ul的li的文本颜色的配置

• 结合本项目业务场景，是使用的本公司自研的基础组件库

• 第一种方法：去修改组件库，使组件库支持配置功能；

• 第二种方法：业务里去二次封装实现，并且兼容全局已经使用过的地方，使得修改最小化、最简单

综合考虑后，由于基础组件库以相对稳定，维护人员并不能及时给予支持，故只能自己去改组件库，提MR,审核等走流程再发版本，周期较长，故采用自己在目前基础组件库支持的内容上，在业务中进行二次封装；

实现思路：一步步思考

1. 基础组件库下拉目前不支持给select-option配置style,但是支持配置自定义的class
2. 组件无法直接ref拿到动态的select-option
3. 借助已经支持的focus事件，对其进行监听
4. 用data-color动态传输每个option配置的颜色，用自定义class获取元素
5. 用到原生js dom操作的知识啦，还是挺好用的哦，思路打开

关键代码如下

             <meg-select
                style="width: 100%"
                v-if="colItem.type === FormItemType.SELECT"
                :placeholder="colItem.placeholder || placeholder.select"
                :mode="colItem.mode"
                v-model="colItem.value"
                :getPopupContainer="
                  colItem.getPopup ? (node) => node.parentNode : null
                "
                @focus="handleSelectOption"
                @change="
                  (e) => {
                    onChange(e, colItem);
                  }
                "
              >
                <meg-select-option
                  v-for="(opt, index) in colItem.options"
                  :key="index"
                  :value="opt.value"
                  :data-color="colItem.statusColorMap && colItem.statusColorMap[Number(opt.value)] || '' "
                  class="select-option-custom-color"
                  >{{ opt.label }}</meg-select-option>
              </meg-select>


    handleSelectOption() {
      let elements = Array.from(document.getElementsByClassName('select-option-custom-color'));
      for (let ele of elements) {
        ele.style.color = ele.dataset.color;
      }
    },