给element的select添加复选框

叁歲伎倆 2021-07-24 13:58 935阅读 1赞

需求：要求给select多选的时候，给下拉框前加上复选框样式  
element select原样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]

需要更改后的样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]

*  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)
          }
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]: /images/20210724/7e2b34656f694c33808cfffd72358d8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]: /images/20210724/991cc627cd65480e9de01b9ecf2c3f6d.png