<template><div v-if="searchLgh == 0"> <el-submenu v-if="viewItem.hasChildren " :index="index"> <template slot="title"> <i class="el-icon-menu"></i> <span>{{viewItem.name}}</span> </template> <sidebar-list v-for="viewItem2 in viewItem.children" :viewItem="viewItem2" :key="viewItem2.id" :searchLgh="searchLgh"> </sidebar-list> </el-submenu> <el-menu-item v-else-if="viewItem.kind === `dashboard` || viewItem.kind === `tableau`" :index="`/index/dashboard/${viewItem.id}`" @click="trackLog(viewItem.name,`/index/dashboard/${viewItem.id}`)"> <i class="el-icon-tickets"></i> <span>{{viewItem.name}}</span> </el-menu-item> <el-menu-item v-else :index="`/index/data-info/${viewItem.id}`" @click="trackLog(viewItem.name,`/index/data-info/${viewItem.id}`)"> <i class="el-icon-tickets"></i> <span>{{viewItem.name}}</span> </el-menu-item> </div > <div v-else> <el-submenu v-if="viewItem.hasChildren" :index="index" class="searchLgh"> <sidebar-list v-for="viewItem2 in viewItem.children" :viewItem="viewItem2" :key="viewItem2.id" :searchLgh="searchLgh"></sidebar-list> </el-submenu> <el-menu-item v-else-if="viewItem.kind === `dashboard` || viewItem.kind === `tableau`" :index="`/index/dashboard/${viewItem.id}`" @click="trackLog(viewItem.name,`/index/dashboard/${viewItem.id}`)"> <i class="el-icon-tickets"></i> <span>{{viewItem.name}}</span> </el-menu-item> <el-menu-item v-else :index="`/index/data-info/${viewItem.id}`" @click="trackLog(viewItem.name,`/index/data-info/${viewItem.id}`)"> <i class="el-icon-tickets"></i> <span>{{viewItem.name}}</span> </el-menu-item> </div></template><script> export default { name: 'sidebar-list', props: { viewItem: { required: true, type: Object, }, searchLgh: { default: 0, type: Number, }, }, computed: { index() { return this.viewItem.id; }, }, methods: { trackLog(sideName, sideUrl) { const str = { name: sideName, url: sideUrl, }; this.$http({apiName: 'track_log'}, str); }, }, };</script><style>.searchLgh .el-submenu__title{ display: none;}.searchLgh .el-menu{ margin-left: 0px;}.el-submenu__title>span,.el-menu-item>span{ display: inline-block; overflow: hidden; max-width: 140px; text-overflow: ellipsis; white-space: nowrap;}.el-menu-item-group__title{ padding:0px;}li.el-submenu .viewBlock .el-submenu__title{ border-bottom:none;}</style>
