element-ui select组件实现下拉框内容跟选中的label显示不同的内容

最近项目有个需求是一个模糊搜索功能，要求搜索出来的下拉框选项跟选中后的内容不一样，比如搜索某个人的账号后，下拉框显示账号+部门，但是选中后的效果只有账号，由于项目用的是element-ui 组件库，默认的select组件只能实现下拉框跟选中的值保持一致，所以只能通过hack手段来实现了，在不改原有组件功能的前提下，完美实现了这个功能，以下是大概思路：

动态的往下拉框的li后面追加内容，首先把要追加的内容通过自定义属性data-name赋值，然后获取所有的li，判断如果有之前添加的自定义属性值，就往li里面追加一个em标签，em里面是要追加的内容。

但是要注意的是每次显示的时候都先先删除掉之前追加的内容，否则每次打开下拉框后都会在之前的内容基础上再追加，会出现越来越多的情况。

所以这就要用不同的标签em来区分原本的内容跟追加的内容。只删除追加的标签内容em。

handleSelectDom() {
      setTimeout(() => {
        let DomList = document.body.querySelectorAll(
          ".el-select-dropdown.el-popper.remote-search .el-select-dropdown__list li"
        );
        DomList.forEach((el) => {
          if (el.dataset.psdeptname) {
            let index = el.innerHTML.indexOf("<em>");
            if (index !== -1) {
              el.innerHTML = el.innerHTML.slice(0, index);
            }
            el.innerHTML += ` <em>${el.dataset.psdeptname}</em>`;
          }
        });
      }, 200);
    },

本文章由javascript技术分享原创和收集