ba5d50420a9f5bc140f0a3a58d63ea695eeefa5e.svn-base 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div class="app-container">
  3. <el-tabs v-model="activeName" @tab-click="handleClick">
  4. <el-tab-pane label="集团信息" name="first">
  5. <component :is="myComponent1" ref="detail" />
  6. </el-tab-pane>
  7. <el-tab-pane label="牧场" name="second">
  8. <component :is="myComponent2" ref="detail" />
  9. </el-tab-pane>
  10. </el-tabs>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'OperationManagement',
  16. data() {
  17. return {
  18. activeName: 'first',
  19. myComponent1: null,
  20. myComponent2: null
  21. }
  22. },
  23. mounted() {
  24. this.detailComponent()
  25. },
  26. methods: {
  27. detailComponent() {
  28. const vue = this
  29. var myComponent1 = () => import('./group/index.vue')
  30. return vue.myComponent1 = myComponent1
  31. },
  32. handleClick(item) {
  33. if (item == 'first') {
  34. const vue = this
  35. var myComponent1 = () => import('./group/index.vue')
  36. return vue.myComponent1 = myComponent1
  37. } else {
  38. const vue = this
  39. var myComponent2 = () => import('./pasture/index.vue')
  40. return vue.myComponent2 = myComponent2
  41. }
  42. }
  43. }
  44. }
  45. </script>