vue select下拉框添加复选框

实现效果

直接改变选中样式：

 <el-select
            v-model="alarmStatu"
            size="small"
            multiple
            collapse-tags
            clearable
            :loading="loading"
            width="220px"
            @change="selectAll"
            @remove-tag="removeTag"
          >
            <el-option
              v-for="items in alarmStatus"
              :key="items.roleId"
              :label="items.roleName"
              :value="items.roleId"
            >
              <span class="check" />
              <span style="margin-left: 0.08rem;">{{ items.roleName }}</span>
            </el-option>
          </el-select>

 <span class="check" />
     <span style="margin-left: 0.08rem;">{{ items.roleName }}</span>

重新规划样式 ，下面直接修改css样式 代码也是网上找的：

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
content: ''
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check {
background: #409eff;
border-color: #409eff;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check:after {
transform: rotate(45deg) scaleY(1)
}
.el-select-dropdown.is-multiple .el-select-dropdown__item .check::after {
box-sizing: content-box;
content: '';
border: 0.01rem solid #fff;
border-left: 0;
border-top: 0;
height: 0.07rem;
left: 0.03rem;
position: absolute;
top: 0.01rem;
transform: rotate(45deg) scaleY(0);
width:0.03rem;
transition: transform .15s ease-in 0.05s;
transform-origin: center;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item .check{
display: inline-block;
position: relative;
top: 0.02rem;
border: 0.01rem solid #D9EBFE;
border-radius: 0.02rem;
box-sizing: border-box;
width: 0.14rem;
height: 0.14rem;
border-color: #D9EBFE;
z-index: 1;
transition: border-color .25s cubic-bezier(.71, -.49, .26, 1.46), background-color .25s cubic-bezier(.71, -.49, .26, 1.46);
}

就搞定了，比起嵌套checkbox更好
全部选择与反选之前详细记过了代码
记得去看