给element的select添加复选框

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