最近项目有个需求是一个模糊搜索功能，要求搜索出来的下拉框选项跟选中后的内容不一样，比如搜索某个人的账号后，下拉框显示账号+部门，但是选中后的效果只有账号，由于项目用的是element-ui 组件库，默认的select组件只能实现下拉框跟选中的值保持一致，所以只能通过hack手段来实现了，在不改原有组件功能的前提下，完美实现了这个功能，以下是大概思路：
动态的往下拉框的li后面追加内容，首先把要追加的内容通过自定义属性data-name赋值，然后获取所有的li，判断如果有之前添加的自定义属性值，就往li里面追加一个em标签，em里面是要追加的内容。
但是要注意的是每次显示的时候都先先删除掉之前追加的内容，否则每次打开下拉框后都会在之前的内容基础上再追加，会出现越来越多的情况。
所以这就要用不同的标签em来区分原本的内容跟追加的内容。只删除追加的标签内容em。
handleSelectDom() {\n setTimeout(() => {\n let DomList = document.body.querySelectorAll(\n ".el-select-dropdown.el-popper.remote-search .el-select-dropdown__list li"\n );\n DomList.forEach((el) => {\n if (el.dataset.psdeptname) {\n let index = el.innerHTML.indexOf("<em>");\n if (index !== -1) {\n el.innerHTML = el.innerHTML.slice(0, index);\n }\n el.innerHTML += ` <em>${el.dataset.psdeptname}</em>`;\n }\n });\n }, 200);\n },\n