//多选子组件
<template><div class="multiple-choice"><el-checkbox class="no1" v-if="isShowAllBtn" :indeterminate="isIndeterminate1" v-model="checkAll1" border :style="{borderColor:isIndeterminate1?'#3886FF':''}" @change="handleCheckAllChange">全选</el-checkbox><el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1"><el-checkbox v-for="(city,index1) in cities" :label="city" :key="city" border :disabled="isDisabled?checkedCities1.length==8&&!checkedCities1.includes(city):false" style="margin-right: 10px;" :style="{marginLeft:index1==0&&isShowAllBtn?'90px':''}">{{city}}</el-checkbox></el-checkbox-group></div>
</template>
<script>
export default {props: {isShowAllBtn: {type: Boolean,default: true,},cityOptions: {type: Array,default: [],},checkAll: {type: Boolean,default: true,},isIndeterminate: {type: Boolean,default: false,},checkedCities: {type: Array,default: () => [],},numberData: {type: Array,default: () => [],},isDisabled: {//是否有禁用的功能使用，比如最多只能选择8个的限制等type: Boolean,default: false,},},data() {return {checkAll1: this.checkAll,checkedCities1: this.checkedCities,cities: this.cityOptions,isIndeterminate1: this.isIndeterminate,};},created() {// this.$emit('getChecked',this.checkedCities1)},methods: {// 多选handleCheckAllChange(val) {this.checkedCities1 = val ? this.cityOptions : [];this.isIndeterminate1 = false;this.$emit("getChecked", this.checkedCities1);},// 点击按钮handleCheckedCitiesChange1(value) {let checkedCount = value.length;this.checkAll1 = checkedCount === this.cities.length;this.isIndeterminate1 =checkedCount > 0 && checkedCount < this.cities.length;if (this.isDisabled) {if (value.length == 8) {this.$message({showClose: true,message: "最多只能同时选中8个指标",iconClass: "warning-icon-class",customClass: "el-message--warning",});}}this.$emit("getChecked", value);},},
};
</script><style lang="scss" scoped>
.multiple-choice {display: flex;align-items: start;// position: relative;margin-top: -6px;.no1 {position: absolute;z-index: 999;}.el-checkbox {height: 32px;line-height: 32px;margin-right: 0;margin-bottom: 10px;}.el-checkbox-group {line-height: 32px;margin-left: 10px;// position: absolute;margin-left: 0;display: flex;flex-wrap: wrap;}.el-checkbox.is-bordered.el-checkbox--medium {padding: 0px 13px 0px 13px;display: flex;align-items: center;}.el-checkbox.is-bordered.is-checked {border-color: #3886ff;}
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner,
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {background-color: #3886ff;border-color: #3886ff;
}
.el-checkbox.is-bordered + .el-checkbox.is-bordered {margin-left: 0px;margin-right: 10px;
}
::v-deep .el-checkbox:hover {border-color: #3886ff;.el-checkbox__input {.el-checkbox__inner {border-color: #3886ff;}}.el-checkbox__label {color: #3886ff;}
}
</style>

//引用多选的父组件
<multipleChoice :cityOptions="cityOptions" :checkAll='checkAll' :isIndeterminate="isIndeterminate" :checkedCities="checkedCities" :isShowAllBtn="isShowAllBtn" @getChecked='getChecked'></multipleChoice>
import multipleChoice from "@/components/multipleChoice.vue";
components: {multipleChoice,
},
data(){return{cityOptions: ["PH值","水温","溶解氧","电导率","浊度","COD","氨氮","高锰酸盐","总磷","总氮","氟化物",],checkedCities: ["PH值","水温","溶解氧","电导率","浊度","COD","氨氮","高锰酸盐","总磷","总氮","氟化物",],checkAll: true,isIndeterminate: false,isShowAllBtn: true,}
},
methods: {getChecked(valArr) {consoloe.log("多选返回",valArr)   },
}