elementUI - 折叠以及多选的组件

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

//父组件  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("选中的")    }}