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("单选返回")
	    },
	}