需求:要求给select多选的时候,给下拉框前加上复选框样式
element select原样式
需要更改后的样式
- html
<el-select
v-model="searchObj.knowledgeIds"
class="select-box"
filterable
multiple
collapse-tags
style="margin-left: 20px"
placeholder="请选择"
@change="changeSelect"
@visible-change="visibleSelect"
>
<el-option
v-for="item in knowledgeArr"
:key="item.id"
:label="item.knowledgeName"
:value="item.id"
/>
</el-select>
- js
// 下拉框展开 关闭事件
visibleSelect(e) {
// 获取所有的li
const lis = document.getElementsByClassName('el-select-dropdown__item')
// 打开下拉框 添加input
if (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--否则每次打开添加就是多个input
for (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)
}
}