LearnAfter.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-20 14:17:00
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-28 13:05:49
 * @FilePath: /danger-manage-web/src/views/myLessions/components/learnAfter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="learnbrfore flex">
    <transition name="fade" mode="out-in">
      <div class="top flex" :key="currentPage">
        <div
          v-show="index < 9 * currentPage && index >= 9 * (currentPage - 1)"
          v-for="(item, index) in afterList"
          :key="index + ''"
          class="learn-item"
        >
          <LearnItem
            :state="state"
            :itemData="item"
            @examination="examination"
          />
        </div>
      </div>
    </transition>

    <div class="bottom flex">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="9"
        :layout="total > 9 ? layout : layout2"
        :total="afterList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import LearnItem from "./LearnItem";
export default {
  name: "learnbrfore",
  components: {
    LearnItem,
  },
  props: {
    state: {
      type: Object,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      // list: [
      //   { state: 2},
      //   { state: 2},
      //   { state: 2},
      //   { state: 2},
      //   { state: 2},
      //   { state: 2},
      //   { state: 2},
      //   { state: 2},
      //   { state: 2},
      // ],
      currentPage: 1,
      total: 19,
      layout: "prev, pager, next, jumper",
      layout2: "prev, pager, next",
    };
  },
  computed: {
    afterList() {
      return this.list.filter((item) => item.state == 2);
    },
  },
  created() {
    console.log("after");
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    examination(e) {
      this.$emit("examination", e);
    },
  },
};
</script>
<style lang="scss" scoped>
.learnbrfore {
  width: 100%;
  height: 100%;
  flex-direction: column;
  .top {
    width: 100%;
    flex: 1;
    padding: 2px;
    box-sizing: border-box;
    // justify-content: space-between;
    flex-wrap: wrap;
    .learn-item {
      width: 32.5%;
      height: 31.5%;
      margin-right: 1.25%;
      &:nth-child(3n) {
        margin-right: 0px;
      }
    }
  }
  .bottom {
    height: 12.7%;
    max-height: 100px;
    justify-content: center;
    align-items: center;
  }
}
</style>