element-uiselect组件多选带有复选框
最开始的想法是使⽤el-checkbox和el-option的插槽来实现该样式，但是过于⿇烦且动态更新时会出现问题；后来参考el-select多选情况下对号的实现，考虑使⽤css来实现多选框；
⽅法⼀
el-select多选情况下带有对号，如果不考虑多选复选框必须要在选择项前⾯的话，可以为对号添加边框，实现复选框的样式。复选框的样式可以参考el-checkbox的样式
.el-select-dropdown.is-multiple .el-select-dropdown__item:after{
border: 1px solid #dcdfe6;
border-radius: 2px;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #fff;
line-height:14px;
margin-top:11px;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selectd:after{
background-color:#409eff;
border-color:#409eff;
color:#ffffff;
}
⽅法⼆
如果想要复选框在⽂字的前边，可以使⽤el-option的插槽，添加⼀个span⽤于展⽰复选框；
html:
<el-select>
<el-option>
<span class="checkbox"></span>
<span class='label-name-box'>{{内容}}</span>
</el-option>
</el-select>
css:
/*清空原来的多选框样式*/
.el-select-dropdown.is-multiple .el-select-dropdown__item:after{
content:"";
borderbox
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{
content:"";
}
/*参考el-checkbox实现checkbox样式*/
.el-select-dropdown.is-multiple .el-select-dropdown__item .checkbox{
display: inline-block;
position: relative;
border: 1px solid #dcdfe6;
border-radius: 2px;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #fff;
z-index: 1;
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46); }
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .checkbox{
background-color:#409eff;
border-color:#409eff;
}
/*参考el-select多选对号样式实现checkbox中对号的样式*/
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .checkbox::after{
position: absolute;
top: -10px;
font-family: element-icons;
content:"\e6da";
font-size: 12px;
font-weight: 700;
-webkit-font-smoothing: antialiased;
color:#fff;
}
/*设置置灰内容样式*/
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.is-disabled .checkbox{
background-color:#f2f6fc;
border-color:#dcdfe6;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.is-disabled .checkbox::after{
color:#c0c4cc;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.is-disabled .label-name-box{
color:#c0c4cc;
font-weight:400;
}

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