需求：要求給select多選的時(shí)候，給下拉框前加上復(fù)選框樣式 element select原樣式
需要更改后的樣式
html
<el-selectv-model="searchObj.knowledgeIds"class="select-box"filterablemultiplecollapse-tagsstyle="margin-left: 20px"placeholder="請(qǐng)選擇"@change="changeSelect"@visible-change="visibleSelect"><el-optionv-for="item in knowledgeArr":key="item.id":label="item.knowledgeName":value="item.id"/></el-select>
js
// 下拉框展開 關(guān)閉事件visibleSelect(e){// 獲取所有的liconst lis = document.getElementsByClassName('el-select-dropdown__item')// 打開下拉框 添加inputif(e){for(let i =0; i < lis.length; i++){const element = lis[i]const input = document.createElement('input')input.style.cssText ='margin-right: 10px;'input.type ='checkbox'// 根據(jù)是否有選中的類名來(lái)判斷l(xiāng)i是否被選中if(element.classList.contains('selected')){// 對(duì)應(yīng)復(fù)選框也設(shè)置被選中input.checked =true}element.insertBefore(input, element.lastChild)}}else{// 關(guān)閉下拉框 移除掉input--否則每次打開添加就是多個(gè)inputfor(let i =0; i < lis.length; i++){const element = lis[i]element.removeChild(element.firstChild)}}},
下拉框改變事件
// 知識(shí)點(diǎn)變化changeSelect(value){const lis = document.getElementsByClassName('el-select-dropdown__item')for(let i =0; i < lis.length; i++){const element = lis[i]// 必須使用nextTick 否則拿不到最新的修改后的dom選中狀態(tài) 也就沒(méi)法判斷this.$nextTick(()=>{// 判斷當(dāng)前的li是否被選中 選中的則設(shè)置復(fù)選框被選中if(element.classList.contains('selected')){element.firstChild.checked =true}else{element.firstChild.checked =false}})// console.log(element)}}
