8b4cade5ef6c6ec7dac514e65f0a5127cb5d31fb.svn-base 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div class="app-container">
  3. <el-tabs v-model="activeName" @tab-click="handleTabClick">
  4. <el-tab-pane label="功能参数" name="first">
  5. <component :is="myComponent1" ref="detail1" />
  6. </el-tab-pane>
  7. <el-tab-pane label="预警参数" name="second">
  8. <component :is="myComponent2" ref="detail2" />
  9. </el-tab-pane>
  10. </el-tabs>
  11. </div>
  12. </template>
  13. <script>
  14. import Function from './function/index'
  15. import EarlyWarning from './earlyWarning/index'
  16. export default {
  17. name: 'DefaultParameter',
  18. components: { Function, EarlyWarning },
  19. data() {
  20. return {
  21. activeName: 'first',
  22. myComponent1: null,
  23. myComponent2: null
  24. }
  25. },
  26. created() {
  27. this.detailComponent()
  28. },
  29. methods: {
  30. detailComponent() {
  31. if (this.activeName == 'first') {
  32. const vue = this
  33. var myComponent1 = () => import('./function/index.vue')
  34. return vue.myComponent1 = myComponent1
  35. } else if (this.activeName == 'second') {
  36. const vue = this
  37. var myComponent2 = () => import('./earlyWarning/index.vue')
  38. return vue.myComponent2 = myComponent2
  39. }
  40. },
  41. handleTabClick() {
  42. if (this.activeName == 'first') {
  43. const vue = this
  44. var myComponent1 = () => import('./function/index.vue')
  45. return vue.myComponent1 = myComponent1
  46. } else if (this.activeName == 'second') {
  47. const vue = this
  48. var myComponent2 = () => import('./earlyWarning/index.vue')
  49. return vue.myComponent2 = myComponent2
  50. }
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. </style>