效果

 封装的组件

<template><el-form-item :label="label"><el-checkbox :indeterminate="isIndeterminateBool" v-model="checkAll"@change="handleCheckAllChange">全选</el-checkbox><el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange"><el-checkbox :label="key" v-for="(item,key) in this.channelList":key="key">{{ item }}</el-checkbox></el-checkbox-group></el-form-item>
</template><script>
import {channelList} from "@/utils/app-channel";export default {name: "Index",data() {return {//渠道列表 全部渠道channelList: channelList,//  checkbox 的不确定状态，一般用于实现全选的效果isIndeterminateBool: true,//全选默认不勾选checkAll: false,data: this.checkList,}},computed: {checkList: {get: function () {return (this.item[this.formDBName] || '').split("|").filter(str => (!!str));},set: function (newValue) {this.item[this.formDBName] = newValue.join("|");}}},props: {//表单名称label: {type: String,required: true},//当前选中项item: {type: Object,required: true},formDBName: {type: String,required: true}},methods: {getArrayCheckList() {return (this.item[this.formDBName] || '').split("|").filter(str => (!!str));},//将数据返回给父组件setChooseData(data) {this.$emit("choose-data", this.formDBName, data)},//value 代表选中还是未选中 ture false两个取值handleCheckAllChange(value) {const chooseChannel = Object.keys(this.channelList)this.checkList = value ? chooseChannel : [];this.isIndeterminateBool = false;this.checkAll = value;const formData = this.checkList.join("|");this.setChooseData(formData)},//选中后计算全选handleCheckedCitiesChange(value) {const chooseChannel = Object.keys(this.channelList);let checkedCount = value.length;this.checkAll = checkedCount === chooseChannel.length;this.isIndeterminateBool = checkedCount > 0 && checkedCount < chooseChannel.length;const formData = value.join("|");this.setChooseData(formData)},},mounted() {// .split("|").filter(str => (!!str && typeof (str) == 'string'))}
}
</script><style scoped></style>

渠道列表 

 

//export const channelList = {"anguo": "安果","baidu": "百度","huawei": "华为","samsung": "三星","oppo": "OPPO","sanliuling": "360","meizu": "魅族","vivo": "VIVO","wandoujia": "豌豆荚","xiaomi": "小米","yyb": "应用宝","yyh": "应用汇",
};

父组件使用

    <el-card shadow="hover"><multiple-choice :item="item" label="渠道/广告开关"form-d-b-name="channel" @choose-data="onCheckResult"></multiple-choice></el-card>

item[channle] 是存入字符串的以|分割的数据

比如

baidu|anguo|yyb

这样

 

onCheckResult

   onCheckResult(dbName, res) {this.item[dbName] = res;}