vue element 下拉组件菜单

<template>

  <div class="device-detail">

    <el-menu @select="selectMenu" :router="false" :default-active="activeName" class="device-detail-nav" mode="horizontal" background-color="#fff" text-color="#333" active-text-color="#409eff">

      <el-menu-item index="Info">{{ $t('menu.personal_information') }}</el-menu-item>

      <el-menu-item index="Attention">{{ $t('menu.my_attention') }}</el-menu-item>

      <el-menu-item index="Message">{{ $t('menu.my_message') }}</el-menu-item>

    </el-menu>

    <!--<router-view></router-view>-->

    <component :is="currentComponent"></component>

  </div>

</template>

<script>

import { getDeviceCameraStatus } from '@/api/devices'

export default {

  name: "jobDetails",

  components: {

    DeviceInfo: () => import('@/views/informationService/jobCommon/personalInformation'),

    DeviceAttention: () => import('@/views/informationService/jobCommon/myAttention'),

    DeviceMessage: () => import('@/views/informationService/jobCommon/myMessage'),

  },

  data() {

    return {

      showCamera: false,

      activeName: 'Info',

      typeId: this.$route.params.typeid,

      deviceId: this.$route.params.id,

      currentComponent: '',

    }

  },

  mounted() {

    this.currentComponent = () => import('./jobCommon/personalInformation')

    // this.getCameraStatus()

  },

  computed: {

    /*navUrl() {

      return `/devices/detail/${this.deviceId}/type/${this.typeId}/`;

    },

    activeNav() {

      const route = this.$route;

      const {path} = route;

      const subPath = path.split('/');

      //console.log(subPath)

      return path

    }*/

  },

  methods: {

    selectMenu(index) {

      this.currentComponent = 'Device' + index

    },

    //增加一个查询设备是否有视频设备

    // getCameraStatus() {

    //   getDeviceCameraStatus({

    //     user_id: this.$store.getters.userid,

    //     device_id: this.deviceId,

    //   }).then((res) => {

    //     if (res.data.errcode === 0) {

    //       this.showCamera = res.data.data.show_video

    //     }

    //   })

    // },

  },

}

</script>