ojk_dtb_manage_ui/src/components/home/PluginManage.vue

<template>
  <div id="pluginManage">
    <br/>
    <div class="left">
      <el-scrollbar :max-height="menuHeight">
        <el-menu default-active="0" class="pluginManage-menu" @select="handlePluginSelect">
          <el-menu-item v-for="(item,index) of pluginList" :key="index" :index="index+''">
            <el-icon>
              <ElIconMagicStick/>
            </el-icon>
            <span>{{ item.pluginName }}</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>

    </div>
    <div class="content">
      <PluginDetail :data="currPlugin"/>
    </div>
  </div>
</template>

<script>
import PluginDetail from '@/components/pluginManage/PluginDetail'
import PluginData from '@/static/datas/PluginData'

export default {
  data() {
    return {
      menuHeight: '',
      pluginList: [],
      currPlugin: {}
    }
  },
  props: {
    height: Object
  },
  components: {
    PluginDetail
  },
  created() {
    this.menuHeight = this.height * 0.7;
    this.pluginList = JSON.parse(JSON.stringify(PluginData))
    if (this.pluginList.length > 0) {
      this.currPlugin = this.pluginList[0]
    }
  },
  mounted() {
  },
  methods: {
    handlePluginSelect(val) {
      this.currPlugin = this.pluginList[Number(val)]
    }
  }
}

</script>

<style scoped>
#pluginManage .left {
  display: inline-block;
  width: 20%;
  height: 100%;
}

#pluginManage .content {
  display: inline-block;
  width: 79%;
  vertical-align: top;
  height: 100%;
}
</style>

<style>
#pluginManage .el-menu-item,.el-sub-menu__title {
  font-size: 17px !important;
  font-weight: 600;
  color: #373737;
}
#pluginManage .pluginManage-menu .is-active {
  color: #6566f4;
}
</style>