给element的select添加复选框

需求：要求给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>

    // 下拉框展开 关闭事件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)}}