【组件封装】改造 Element-UI 多选框组件

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" />
    </div>
</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>
    </div>
</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"
        />
    </div>
</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)">
                    <span>
                        <slot
                            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>
    </div>
</template>

<script>
/**
 * @description:props说明
 * @param {Boolean} showCheckAll -是否显示全选按钮
 * @param {Boolean} inline -是否是行内表单
 * @param {Array