【组件封装】改造 Element-UI 多选框组件 (el-checkbox)
el-checkbox多选框组件
element-ui官网的多选框组件，是采用简单数组进行配置的，显示的lable值与勾选后的值是同一个
实际业务场景
在实际业务开发中，我们更多遇到是如下数组对象的格式。 我们需要额外将数组进行label、value的拆分才能使用 el-checkbox 。 如果要实现勾选、全选、默认赋值的场景，将需要更加复杂的代码处理。
[
{ label: '小红', value: '1' },
{ label: '小明', value: '2' },
{ label: '小芳', value: '3' }
组件设计(简易版本)
调用效果及代码
<!--
* @Date: 2020-12-09 17:52:54
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-09 14:22:01
* @LastEditors: surewinT 840325271@qq.com
* @Description: 调用页面
<template>
<div class="">
<Test :checkboxList="checkboxList" v-model="result" />
</template>
<script>
import Test from "./test.vue";
export default {
components: {
Test,
props: [],
data() {
return {
checkboxList: [
{ label: "小红", value: "1" },
{ label: "小明", value: "2" },
{ label: "小芳", value: "3" },
result: [],
mounted() {},
watch: {
result() {
console.log("变化了：", this.result);
methods: {},
</script>
<style lang='scss' scoped>
</style>
改造后的组件（test.vue）
<!--
* @Date: 2022-05-09 11:52:02
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-09 14:22:10
* @LastEditors: surewinT 840325271@qq.com
* @Description: 改造后的组件
<template>
<div class="">
<el-checkbox-group v-model="labelResult">
<el-checkbox v-for="(item, index) in labelList" :key="index" :label="item"> </el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
components: {},
props: {
checkboxList: {
type: Array,
default: () => {
return [];
data
() {
return {
labelResult: [],
labelList: [],
labelMap: {},
mounted() {
this.loadData();
watch: {},
methods: {
// 初始化数据
loadData() {
this.checkboxList.forEach((res) => {
this.labelList.push(res["label"]);
this.labelMap[res["label"]] = res["value"];
</script>
<style lang='scss' scoped>
</style>
组件设计（完整版）
组件简介
调用效果及代码
<!--
* @Date: 2020-12-09 17:52:54
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-09 14:49:13
* @LastEditors: surewinT 840325271@qq.com
* @Description: 调用页面
<template>
<div class="">
<p-el-checkbox
v-model="result"
resultType="Array"
label="name"
prop="id"
:defaultCheck="defaultCheck"
:checkboxList="checkboxList"
</template>
<script>
import Pelcheckbox from "./p-el-checkbox.vue";
export default {
components: {
"p-el-checkbox": Pelcheckbox,
props: [],
data() {
return {
defaultCheck: ["1", "3"],
checkboxList: [
{ name: "小红", id: "1" },
{ name: "小明", id: "2" },
{ name: "小芳", id: "3" },
result: {},
mounted() {},
watch: {
result: function () {
console.log("变化了：", this.result);
methods: {},
</script>
<style lang='scss' scoped>
</style>
组件源码（p-el-checkbox.vue）
<!--
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-09 14:57:09
* @LastEditors: surewinT 840325271@qq.com
* @Description: 改造 Element-UI 多选框组件 (el-checkbox)
<template>
<div :class="customClass">
<el-checkbox
v-if="showCheckAll"
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
</el-checkbox>
<el-checkbox-group v-model="labelResult" :class="inline ? '' : 'al_checkbox'">
<span v-for="(item, index) in labelList" :key="index">
<el-checkbox :label="item" :class="labelClass" @change="handleCheckChange" v-if="judgeHidden(item)">
name="label"
:index="index"
:label="item"
:checkboxList="checkboxList"
:disabled="checkboxMap[item] && checkboxMap[item].disabled"
:data="checkboxList[index] ? JSON.parse(JSON.stringify(checkboxList[index])) : {}"
<span> {{ item }} </span>
</slot>
</span>
</el-checkbox>
</span>
</el-checkbox-group>
</template>
<script>
* @description:props说明
* @param {Boolean} showCheckAll -是否显示全选按钮
* @param {Boolean} inline -是否是行内表单
* @param {Array<Object>} checkboxList -多选框组件的数据配置
* @param {String} label -label对应的字段
* @param {String} prop -value对应的字段
* @param {Array} defaultCheck -默认勾选的项
* @param {String} resultType -绑定值的类型(支持对象、数组两种格式)
* @param {String} labelClass -单个选项绑定类名，可用于自定义样式
* @param {String} customClass -多选框的绑定类型，可用于自定义样式
* @param {Array} checkboxHidden -隐藏的表单项，元素对应checkboxList中prop的值
export default {
name: "p-el-checkbox",
props: {
showCheckAll: {
type: Boolean,
default: true,
inline: {
type: Boolean,
default: true,
checkboxList: {
type: Array,
default: () => {
return [];
label: {
type: String,
default: "label",
prop: {
type: String,
default: "value",
defaultCheck: {
type: Array,
default: () => {
return [];
resultType: {
type: String,
default: "Array", // 可选：Array 、Object
labelClass: {
type: String,
default: "",
customClass: {
type: String,
default: "",
checkboxHidden: {
type: Array,
default: function () {
return [];
data() {
return {
labelList: [],
labelResult: [],
labelMap: {}, // label与res的映射(res指checkboxList每一项元素)
isIndeterminate: false,
checkAll: false,
currentLabel: null,
currentValue: null,
mounted() {
this.loadData();
computed: {
arrayRusult: function () {
let result = [];
if (this.resultType == "Array") {
this.labelResult.forEach((res) => {
result.push(this.labelMap[res]);
return result;
objectRusult: function () {
let obj = {};
if (this.resultType == "Object") {
for (let item in this.labelMap) {
if (this.checkboxHidden.indexOf(this.labelMap[item]) != -1) {
continue;
if (this.labelResult.indexOf(item) == -1) {
obj[this.labelMap[item]] = false;
} else {
obj[this.labelMap[item]] = true;
return obj;
// 名字映射
checkboxMap() {
let obj = {};
for (let res of this.checkboxList) {
obj[res[this.label]] = res;
return obj;
watch: {
checkboxList() {
this.loadData();
labelResult() {
this.isIndeterminate = true;
this.checkAll = false;
if (this.labelResult.length == 0) {
this.isIndeterminate = false;
this.checkAll = false;
} else if (this.labelResult.length == this.labelList.length - this.checkboxHidden.length) {
this.isIndeterminate = false;
this.checkAll = true;
// 返回数组结果
if (this.resultType == "Array") {
this.$emit("input", this.arrayRusult);
// 返回对象结果
if (this.resultType == "Object") {
this.$emit("input", this.objectRusult);
defaultCheck() {
this.labelResult = [];
this.checkboxList.forEach((res) => {
if (this.defaultCheck.indexOf(res[this.prop]) != -1) {
this.labelResult.push(res[this.label]);
methods: {
// 初始化数据
loadData() {
this.checkboxList.forEach((res) => {
this.labelList.push(res[this.label]);
this.labelMap[res[this.label]] = res[this.prop];
if (this.defaultCheck.indexOf(res[this.prop]) != -1) {
this.labelResult.push(res[this.label]);
// 全选按钮
handleCheckAllChange(val) {
this.isIndeterminate = false;
if (val) {
this.isIndeterminate = false;
this.checkAll = true;
this.labelResult = JSON.parse(JSON.stringify(this.labelList));
// 过滤隐藏选项
this.labelResult = this.labelResult.filter((res) => {
let exist = this.checkboxHidden.indexOf(this.labelMap[res]);
return exist == -1;
} else {
this.checkAll = false;
this.labelResult = [];
// 单击多选框
handleCheckChange(val, e) {
this.currentLabel = this.labelMap[e.target.value];
this.currentValue = val;
// 返回数组结果：（勾选结果，点击的prop，点击的prop是否勾选）
if (this.resultType == "Array") {
this.$emit("change", this.arrayRusult, this.currentLabel, this.currentValue);
// 返回对象结果：（勾选结果，点击的prop，点击的prop是否勾选）
if (this.resultType == "Object") {
this.$emit("change", this.objectRusult, this.currentLabel, this.currentValue);
// 隐藏判断
judgeHidden(name) {
let show = this.checkboxHidden.indexOf(this.labelMap[name]) == -1 ? true : false;
return show;
</script>
<style lang="scss" scoped>
.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);