<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: {
type: Boolean,
default: false,
},
},
data() {
return {
checkAll1: this.checkAll,
checkedCities1: this.checkedCities,
cities: this.cityOptions,
isIndeterminate1: this.isIndeterminate,
};
},
created() {
},
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;
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;
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)
},
}