elementUI - 折叠以及单选的组件

//子组件
<template><!-- 左侧第二个 --><div class="left-second-single"><div class="layer-list-wrapper1"><el-radio-group v-model="radio" @input="inputChange"><el-collapse v-model="activeNames" @change="handleChange"><el-collapse-item v-for="(item,index) in leftSelectSingleArr" :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-radio v-for="(itemVal,indexVal) in item.stationArr" :key="indexVal+1" :label="itemVal.stationLabel">{{ itemVal.stationName }}<span class="check-handwork" v-if="itemVal.stationType==0">自动</span><span class="check-auto" v-if="itemVal.stationType==1">手工</span></el-radio></el-collapse-item></el-collapse></el-radio-group></div></div>
</template><script>
export default {components: {},props: {leftSelectSingleArr: {type: Array,default: () => [],},},data() {return {activeNames: [],radio: "",};},created() {if (this.leftSelectSingleArr.length > 0) {this.activeNames = [this.leftSelectSingleArr[0].nameNumber];if (this.leftSelectSingleArr[0].stationArr.length > 0) {this.radio = this.leftSelectSingleArr[0].stationArr[0].stationLabel;}}this.inputChange(this.radio);},watch: {},mounted() {},methods: {handleChange(val) {},// 单击单选inputChange(val) {// 判断是手工还是自动，给父组件传值let stationArr = this.findEqualParams(this.leftSelectSingleArr, val); //val所在的数组的父类的数组let stationType = stationArr[0].stationArr.find((item) => item.stationLabel == val).stationType; //获取到的当前点击的是手工还是自动this.$emit("getRadioVal", val, stationType);},//判断是否打开judgeActive(data) {return this.activeNames.indexOf(data);},// 寻找当前点击的单选所在的数组的父类的数组findEqualParams(array, paramToFind) {return array.filter((obj) =>obj.stationArr.some((item) => item.stationLabel === paramToFind));},},
};
</script><style lang="scss">
.left-second-single {.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;}}
}.layer-list-wrapper1::-webkit-scrollbar {display: none;
}
.el-collapse-item__wrap {border: 0;
}
.el-radio {width: 100%;display: flex;align-items: center;margin: 16px 0;.el-radio__input {width: 14px;height: 14px;}.el-radio__label {width: 100%;display: flex;justify-content: space-between;align-items: center;.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-radio:hover{.el-radio__input{.el-radio__inner{border-color: #3886ff;}}.el-radio__label{color: #3886ff;}
}
</style>

//父组件
<leftSelectSingle v-if="leftSelectSingleFlag" :leftSelectSingleArr="leftSelectSingleArr" @getRadioVal='getRadioVal'></leftSelectSingle>
import leftSelectSingle from "@/components/leftSelect/leftSelectSingle.vue";components: {leftSelectSingle,},data() {return {leftSelectSingleArr: [{name: "省控断面",numData: "",nameNumber: 1,stationArr: [{stationName: "桥1",stationLabel: 1,stationType: 1, //1是手工，2是自动},{stationName: "桥2",stationLabel: 2,stationType: 0, //1是手工，0是自动},],},{name: "市控断面",numData: "",nameNumber: 2,stationArr: [{stationName: "桥3",stationLabel: 3,stationType: 1, //1是手工，0是自动},{stationName: "桥4",stationLabel: 4,stationType: 0, //1是手工，0是自动},],},],leftSelectSingleFlag: true,}
},methods: {getRadioVal(val, stationType) {console.log("单选返回")},}