elementUI - 折叠以及多选的组件

//子组件
<template><!-- 左侧第二个 --><div class="left-second-more"><div class="layer-list-wrapper1"><el-collapse v-model="activeNames" @change="handleChange"><el-collapse-item v-for="(item,index) in leftSelectMoreArr" :key="index+1" :name="item.nameNumber"><template slot="title"><div class="left-title"><div class="left-icon" v-if="item.textName">{{ item.textName }}</div><div class="left-name">{{item.name}}（{{item.numData}}个）</div></div><i class="iconfont" :class="judgeActive('1')!=-1? 'icon-bofang-copy-copy':'icon-bofang'"></i></template><el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange"><el-checkbox v-for="(itemVal,indexVal) in item.stationArr" :key="indexVal+1" :label="itemVal.stationLabel">{{ itemVal.stationName }}<span :class="itemVal.stationType==1?'check-handwork':'check-auto'">{{itemVal.stationType==1?'手工':"自动"}}</span></el-checkbox></el-checkbox-group></el-collapse-item></el-collapse></div></div>
</template><script>
export default {components: {},props: {leftSelectMoreArr: {type: Array,default: () => [],},},data() {return {checkList: [],activeNames: [],differentData: [],isFlag: false,stationType: "",numberVal1: 0,numberVal2: 0,numberVal3: 0,};},created() {if (this.leftSelectMoreArr.length > 0) {this.activeNames = [this.leftSelectMoreArr[0].nameNumber];if (this.leftSelectMoreArr[0].stationArr.length > 0) {this.leftSelectMoreArr[0].stationArr.forEach((ele) => {this.checkList.push(ele.stationLabel);});this.stationType = this.leftSelectMoreArr[0].nameNumber;}}this.$emit("getTreeVal", this.checkList, this.stationType);},watch: {checkList(newVal, oldVal) {this.differentData = this.getDifferentData(newVal, oldVal);let length1 = newVal.length;let length2 = oldVal.length;if (length1 > length2) {this.isFlag = true; //说明是新增} else {this.isFlag = false; //说明是减少}// this.$emit("getTreeVal", this.checkList, this.stationType);},stationType(newVal, oldVal) {},},mounted() {},methods: {handleChange(val) {},handleCheckedCitiesChange(val) {this.$emit("getTreeVal", this.checkList, this.stationType);},//判断是否打开judgeActive(data) {return this.activeNames.indexOf(data);},// 获取两个数组中不同的值getDifferentData(arr1, arr2) {return arr1.concat(arr2).filter(function (v, i, arr) {return arr.indexOf(v) === arr.lastIndexOf(v);});},// 数组去重removeDuplicates(array) {return [...new Set(array)];},// 比较两个数组是否有相同数据，有的话则去掉removeCommonElements(arr1, arr2) {return arr1.filter((item) => !arr2.some((otherItem) => otherItem === item));},},
};
</script><style lang="scss">
.left-second-more {.layer-list-wrapper1 {height: calc(100% - 22px);width: 100%;border-radius: 4px;background-color: #fff;// overflow: auto;margin-top: 10px;display: flex;flex-direction: column;.el-collapse {width: 100%;border: 0;color: #4b4b4b;//   overflow: auto;.el-collapse-item {margin-bottom: 12px;}.el-collapse-item__header {width: 100%;height: 60px;background: #f8f9ff;border-bottom: none;justify-content: space-between;align-items: center;border-radius: 4px;padding: 0 16px;.el-collapse-item__arrow {display: none;}.left-title {display: flex;align-items: center;.left-icon {width: 26px;height: 26px;line-height: 26px;text-align: center;border-radius: 500000px;background: #e1e6f0;color: #303133;font-size: 14px;margin-right: 12px;}.left-name {color: #303133;font-weight: 700;}}.iconfont {font-size: 10px;}}.el-collapse-item__header:hover {background: #3886ff;border-radius: 4px;.left-title {.left-icon {border-radius: 4px;background: #fff;color: #0064ff;}.left-name {color: #fff;font-weight: 700;}}.iconfont {color: #fff;}}.is-active {background: #3886ff !important;border-radius: 4px;.left-title {.left-icon {border-radius: 4px;background: #fff;color: #0064ff;}.left-name {color: #fff;font-weight: 700;}}.iconfont {color: #fff;transform: rotate(90deg);}}.el-collapse-item__content {padding: 2px 16px;border-left: 1px solid #e1e6f0;border-right: 1px solid #e1e6f0;border-bottom: 1px solid #e1e6f0;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;margin-bottom: 12px;}.el-collapse-item:last-child {.el-collapse-item__wrap {border: 0;.el-collapse-item__content {margin-bottom: 0px;}}}}/* 设置滚动条的样式 */.el-collapse::-webkit-scrollbar {width: 0px;height: 0;}.el-checkbox-group {.el-checkbox {width: 100%;display: flex;justify-content: space-between;align-items: center;margin: 16px 0;.el-checkbox__input {height: 14px;}.el-checkbox__input.is-checked + .el-checkbox__label {color: #3886ff;}.el-checkbox__label {width: 100%;display: flex;align-items: center;padding: 0;//   margin-bottom: 24px;color: #606266;line-height: 14px;margin-left: 12px;img {width: 20px;// height: 20px;margin-right: 8px;}.check-handwork {width: 44px;height: 24px;line-height: 24px;text-align: center;display: block;margin-left: auto;border-radius: 4px;background: #3886ff1a;border: 1px solid #3886ff;color: #3886ff;}.check-auto {width: 44px;height: 24px;line-height: 24px;text-align: center;display: block;margin-left: auto;border-radius: 4px;background: #70c4221a;border: 1px solid #70c422;color: #70c422;}}// .el-checkbox__label:hover{//   color: #3886ff;// }}.el-checkbox:hover{.el-checkbox__input{.el-checkbox__inner{border-color: #3886ff;}}.el-checkbox__label{color: #3886ff;}}.el-checkbox:last-child {.el-checkbox__label {margin-bottom: 0px;}}}}
}.layer-list-wrapper1::-webkit-scrollbar {display: none;
}
.el-checkbox {line-height: 27px;
}
</style>

//父组件<leftSelectMore v-if="leftSelectMoreFlag" :leftSelectMoreArr="leftSelectMoreArr" @getTreeVal='getSingleVal'></leftSelectMore>import leftSelectMore from "@/components/leftSelect/leftSelectMore.vue";components: { leftSelectMore },
data() {return {leftSelectMoreArr: [{name: "省控断面",numData: "1",nameNumber: 1,stationArr: [{stationName: "桥1",stationLabel: 1,stationType: 1, //1是手工，2是自动},{stationName: "桥2",stationLabel: 2,stationType: 2, //1是手工，2是自动},],},{name: "市控断面",numData: "1",nameNumber: 2,stationArr: [{stationName: "桥3",stationLabel: 3,stationType: 1, //1是手工，2是自动},{stationName: "桥4",stationLabel: 4,stationType: 2, //1是手工，2是自动},],},],leftSelectMoreFlag: true,}
},
methods: {// 点击了左侧的哪一个选项getSingleVal(val, stationType) {console.log("选中的")}
}