vueselect下拉框添加复选框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="leId"
:label="leName"
:value="leId"
>
<span class="check"/>
<span >{{ leName }}</span>
</el-option>
</el-select>
<span class="check" />
<span >{{ leName }}</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;
box sizingtop:0.01rem;
transform:rotate(45deg)scaleY(0);
width:0.03rem;
transition: transform .15s ease-in0.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更好
全部选择与反选之前详细记过了代码
记得去看

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。