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("选中的")
    }
}