index.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!-- -->
  2. <template>
  3. <div class="m-container">
  4. <h2>
  5. <div class="squrt"></div>
  6. 课外练习
  7. </h2>
  8. <div class="m-core">
  9. <tab-router v-model.trim="activeIndex" type="card" @tab-click="handleClick">
  10. <el-tab-pane lazy label="班级布置" name="1">
  11. <afterSchoolList v-if="activeIndex == 1"></afterSchoolList>
  12. </el-tab-pane>
  13. <el-tab-pane lazy label="学员布置" name="2">
  14. <afterWorkList v-if="activeIndex == 2"></afterWorkList>
  15. </el-tab-pane>
  16. <el-tab-pane lazy label="学员历史" name="3">
  17. <oldAfterWorkList v-if="activeIndex == 3"></oldAfterWorkList>
  18. </el-tab-pane>
  19. </tab-router>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import afterSchoolList from "@/views/afterSchoolManager/afterSchoolList";
  25. import afterWorkList from "@/views/afterSchoolManager/afterWorkList";
  26. import oldAfterWorkList from "@/views/afterSchoolManager/components/oldAfterWorkList.vue";
  27. export default {
  28. components: { afterSchoolList, afterWorkList, oldAfterWorkList },
  29. data() {
  30. const query = this.$route.query;
  31. return {
  32. activeIndex: query.opt || "1",
  33. };
  34. },
  35. //生命周期 - 创建完成(可以访问当前this实例)
  36. created() {},
  37. //生命周期 - 挂载完成(可以访问DOM元素)
  38. mounted() {
  39. this.init();
  40. },
  41. methods: {
  42. init() {
  43. if (this.$route.query.activeIndex) {
  44. this.activeIndex = this.$route.query.activeIndex + "";
  45. }
  46. console.log();
  47. },
  48. handleClick(val) {
  49. this.activeIndex = val.name;
  50. },
  51. },
  52. };
  53. </script>