先上效果图:
主要使用element-ui中的“Checkbox 多选框”组件
Checkbox 多选框
<div class="inner-drawer-content-container">
<el-checkbox-group v-model="chosenTypes">
<el-checkbox v-for="(item, index) in intentionTypes" :label="item" :key="index" border size="medium">
{{ item }}
</el-checkbox>
</el-checkbox-group>
</div>
export default {
data() {
intentionTypes: ["哲学","经济学","法学","文学","教育学","历史学","理学","工学","农学","医学","管理学","艺术学"],
chosenTypes: []
}
}
.inner-drawer-content-container {
margin-bottom: 5px;
overflow-y: scroll;
}
.inner-drawer-content-container .el-checkbox {
margin-left: 10px;
margin-right: 0;
margin-top: 5px;
}
/deep/ .inner-drawer-content-container .el-checkbox__input {
display: none;
}
/deep/ .inner-drawer-content-container .el-checkbox__label {
padding-left: 0;
}
/deep/ .inner-drawer-content-container .el-checkbox.is-bordered.el-checkbox--medium {
padding: 7px 10px 7px 10px;
}
/deep/ .inner-drawer-content-container .el-checkbox.is-bordered.is-checked {
background-color: #F36A45;
border-color: #F36742;
}
/deep/ .inner-drawer-content-container .el-checkbox__input.is-checked + .el-checkbox__label {
color: white;
}