dy-admin-manager/src/views/attendanceManager/attendanceList/components/textConment.vue

<template>
  <div>
    <!--   -->
    <!-- <el-checkbox-group
      v-if="subjectList.length > 1"
      @change="checkSubject"
      v-model="subjectId"
      size="medium"
      style="margin-bottom: 20px"
    >
      <el-checkbox-button
        :class="subjectList.length == 1 ? 'one' : ''"
        v-for="(item, index) in subjectList"
        :key="index"
        :label="item.id"
        >{{ item.name }}</el-checkbox-button
      >
    </el-checkbox-group> -->
    <div v-for="(item, index) in fitterTraining" :key="index">
      <el-alert :title="'练习组' + (index + 1)" :closable="false">
        {{ item.subjectName }}
      </el-alert>

      <el-table
        :data="item.trainingDetailList"
        :show-header="false"
        style="width: 100%;margin-bottom: 12px;"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column prop="musicScoreName"></el-table-column>
        <el-table-column prop="trainingSpeed">
          <template slot-scope="scope"
            >{{ scope.row.trainingSpeed }}速度</template
          >
        </el-table-column>
        <el-table-column prop="times">
          <template slot-scope="scope"
            >{{ scope.row.times }}次</template
          >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getHomeworkSubjectPublic } from "../api";
export default {
  props: ["trainingDetailList", "courseScheduleId"],
  data() {
    return {
      subjectId: [],
      list: [],
      subjectList: [],
      fitterTraining: []
    };
  },
  mounted() {
    console.log(this.trainingDetailList);
    this.fitterTraining = this.trainingDetailList.map(item => item);
    this.getPublicSubject();
  },

  methods: {
    async getPublicSubject() {
      try {
        const res = await getHomeworkSubjectPublic({
          courseScheduleId: this.courseScheduleId,
          type: "HOMEWORK"
        });
        this.subjectList = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    checkSubject(val) {
      console.log(val[0], this.trainingDetailList);
      if (this.subjectId.length > 1) {
        this.subjectId.shift();
      }
      if (this.subjectId) {
        this.fitterTraining = this.trainingDetailList.filter(item => {
          return item.subjectId == this.subjectId[0];
        });
      } else {
        this.fitterTraining = this.trainingDetailList.map(item => item);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-row {
  line-height: 40px !important;
}
::v-deep .el-alert__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;

  .el-alert__description {
    margin-top: 0;
  }
}
::v-deep .el-table {
  width: 100% !important;
}
.rowFirst {
  // padding-left: 58px;
  color: #101010;
}
.rowSecond {
  text-align: right;
  span {
    color: #101010;
  }
  color: #9a9a9a;
}
.rowlast {
  text-align: right;
  padding-right: 10px;
  color: #101010;
  .red {
    color: #f44743;
  }
  span {
    color: #101010;
  }
  color: #9a9a9a;
}
</style>