需求：要求給select多選的時候，給下拉框前加上復選框樣式
element select原樣式

需要更改后的樣式

• html

<el-selectv-model="searchObj.knowledgeIds"class="select-box"filterablemultiplecollapse-tagsstyle="margin-left: 20px"placeholder="請選擇"@change="changeSelect"@visible-change="visibleSelect"><el-optionv-for="item in knowledgeArr":key="item.id":label="item.knowledgeName":value="item.id"/></el-select>

• js

// 下拉框展開 關閉事件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'// 根據是否有選中的類名來判斷li是否被選中if (element.classList.contains('selected')) {// 對應復選框也設置被選中input.checked = true}element.insertBefore(input, element.lastChild)}} else {// 關閉下拉框 移除掉input--否則每次打開添加就是多個inputfor (let i = 0; i < lis.length; i++) {const element = lis[i]element.removeChild(element.firstChild)}}},

• 下拉框改變事件

// 知識點變化changeSelect(value) {const lis = document.getElementsByClassName('el-select-dropdown__item')for (let i = 0; i < lis.length; i++) {const element = lis[i]// 必須使用nextTick 否則拿不到最新的修改后的dom選中狀態 也就沒法判斷this.$nextTick(() => {// 判斷當前的li是否被選中 選中的則設置復選框被選中if (element.classList.contains('selected')) {element.firstChild.checked = true} else {element.firstChild.checked = false}})// console.log(element)}}

總結

以上是生活随笔為你收集整理的给element的select添加复选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。