<!-- * @Author: 纪泽龙 jizelong@qq.com * @Date: 2022-09-20 14:17:00 * @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditTime: 2022-09-28 09:37:40 * @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 beforeList" :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="beforeList.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: 0 }, // { state: 1 }, // { state: 0 }, // { state: 1 }, // { state: 0 }, // { state: 1 }, // { state: 1 }, // { state: 1 }, // { state: 0 }, // ], currentPage: 1, total: 19, layout: "prev, pager, next, jumper", layout2: "prev, pager, next", }; }, computed: { beforeList() { return this.list.filter((item) => item.isFinish != '1'); }, }, created() { console.log("before"); }, 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>