【组件封装】改造 Element-UI 多选框组件 (el-checkbox)

el-checkbox多选框组件

element-ui官网的多选框组件，是采用简单数组进行配置的，显示的lable值与勾选后的值是同一个配图

实际业务场景

在实际业务开发中，我们更多遇到是如下数组对象的格式。
我们需要额外将数组进行label、value的拆分才能使用 el-checkbox 。
如果要实现勾选、全选、默认赋值的场景，将需要更加复杂的代码处理。

[
  { label: '小红', value: '1' },
  { label: '小明', value: '2' },
  { label: '小芳', value: '3' }
]

组件设计(简易版本)

调用效果及代码

改造后的组件（test.vue）

组件设计（完整版）

组件简介

调用效果及代码

组件源码（p-el-checkbox.vue）

.el-checkbox {
    display: inline-block;
    padding-right: 10px;
}
.al_checkbox {
    .el-checkbox {
        display: block;
        margin-right: 0;
    }
}
// 滚动条样式修改
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(155, 155, 155, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(155, 155, 155, 0.1);
}