element-ui select组件多选带有复选框

最开始的想法是使用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:"";
}
.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;
}