dy-admin-manager/src/views/teamBuild/components/soundSetComponents/chioseSoundList.vue

<template>
  <div>

    <div class="soundWrap">

      <el-checkbox-group v-model.trim="activeSoundList">
        <div class="itemList">
          <div class="categroy"
               v-for="(item,index) in soundList"
               :key="index">
            <p>{{item.name}}</p>
            <el-checkbox :label="sound.id"
                         @change="changeCheck"
                         :disabled="activeSound.includes(sound.id)"
                         v-for="(sound,indexs) in item.subjects"
                         :key="indexs">{{sound.name}}</el-checkbox>
          </div>
        </div>
      </el-checkbox-group>

    </div>
    <p class="soundSubP">当前选择声部数:{{activeSoundList.length}}</p>
    <div class="btnWraps">
      <el-button @click="generates"
                 type="primary">
        确定
      </el-button>

    </div>
  </div>
</template>
<script>
export default {
  props: ['soundList', 'childSoundList', 'activeSound'],
  data () {
    return {
      chioseSoundNum: '',
      activeSoundList: this.activeSound || [],
    }
  },
  mounted () {
    console.log(this.soundList)
  },
  activated () {
    console.log(this.soundList)
  },
  methods: {
    generates () {
      this.$emit('chioseSound', this.activeSoundList)
    },
    changeCheck () {
    }
  }
}
</script>
<style lang="scss" scoped>
.soundWrap {
  width: 100%;
  overflow: auto;
  .itemList {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-grow: 1;
    height: 300px;
    max-height: 300px;
    overflow: auto;
    .categroy {
      z-index: 100;
      width: 150px;
      min-width: 150px;
      color: #606266;
      .el-checkbox {
        height: 30px;
        line-height: 30px;
        display: block;
        padding-left: 20px;
      }
      p {
        height: 40px;
        line-height: 40px;
        background-color: #edeef0;
        margin-bottom: 15px;
        text-align: center;
      }
    }
  }
}
.soundSubP {
  height: 40px;
  line-height: 40px;
  background-color: #edeef0;
  padding-left: 25px;
  margin-bottom: 20px;
}
.btnWraps {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>