dy-admin-manager/src/views/afterSchoolManager/components/textConment.vue

<template>
  <div>
    <!--   -->
    <el-checkbox-group
      v-if="subjectList.length > 1"
      @change="checkSubject"
      v-model="subjectId"
      size="medium"
      :max="1"
      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>
    <el-row :gutter="20" v-for="(item, index) in fitterTraining" :key="index">
      <el-col :span="12"
        ><div class="rowFirst">{{ item.musicScoreName }}</div></el-col
      >
      <el-col :span="6"
        ><div class="rowSecond">
          <span>{{ item.trainingSpeed }}</span> 速度
        </div></el-col
      >
      <el-col :span="6"
        ><div class="rowlast">
          <!-- <span :class="item.trainingTimes >= item.times ? '' : 'red'">{{
            item.trainingTimes
          }}</span>  /-->
          <span> {{ item.times }}</span>
          次
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script>
import { getHomeworkSubjectPublic } from "../api";
export default {
  props: ["trainingDetailList", "courseScheduleId", "type"],
  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: this.type,
        });
        this.subjectList = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    checkSubject(val) {
      console.log(val[0], this.trainingDetailList);
      if (val[0]) {
        this.fitterTraining = this.trainingDetailList.filter((item) => {
          return item.subjectId == val[0];
        });
      } else {
        this.fitterTraining = this.trainingDetailList.map((item) => item);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.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>