elementUI - 折叠以及单选的组件

//子组件                                                                          {{ item.textName }}                {{item.name}}（{{item.numData}}个）                                                                  {{ itemVal.stationName }}              自动              手工                                          expindex.php/tags-1038.html" >ort 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)      );    },  },};  .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;  }}

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