<!-- * @Author: 纪泽龙 jizelong@qq.com * @Date: 2022-09-20 11:30:14 * @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditTime: 2022-09-28 09:19:38 * @FilePath: /danger-manage-web/src/views/myLessons/components/Left.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="lession-left-wrapper flex"> <el-tabs class="top" v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="待学习" name="first"></el-tab-pane> <el-tab-pane label="已学习" name="second"></el-tab-pane> </el-tabs> <div class="middle flex"> <transition name="fade-transform" mode="out-in"> <keep-alive> <component :is="currentTabComponent" @examination="examination" :state="state" :list="list"></component> </keep-alive> </transition> </div> </div> </template> <script> import LearnAfter from "./LearnAfter"; import LearnBefore from "./LearnBefore"; import { getTrainInfoByPersonId } from "@/api/trainManage/manage" export default { name: "lession-left", components: { // LearnAfter, // LearnBefore, }, data() { return { activeName: "first", currentTabComponent: LearnBefore, list:[], state:{ "0":'未完成', "1":"已完成", "2":"已过期", "3":"未开始" }, }; }, created(){ this.getUserTrains(); }, methods: { getUserTrains(){ getTrainInfoByPersonId().then(res =>{ this.list = res.data; }) }, handleClick(tab) { if (tab.paneName == "first") { this.currentTabComponent = LearnBefore; } else { this.currentTabComponent = LearnAfter; } }, examination(e){ this.$emit('examination',e) } }, }; </script> <style lang="scss" scoped> .lession-left-wrapper { padding: 5px 26px 0; height: 100%; width: 100%; flex-direction: column; .top { // margin-bottom: 47px; } .middle { flex: 1; height: 100%; width: 100%; justify-content: space-between; overflow: hidden; } } </style>