zookeeper之节点基本操作

commonMenu.vue

<template>
  <div class="commonMenuStyle">
    <el-sub-menu v-if="hasChildren" :index="item.MenuId">
      <template #title>
        <el-icon><location /></el-icon>
        <!--  isCollapseMenu 用于折叠是不显示名字，只展示icon-->
        <span v-if="!isCollapseMenu">{{ item.text }}</span>
      </template>
      <!-- :index="child.routerName" 用于跳转 -->
      <el-menu-item
        v-for="child in item.Children"
        :key="child.MenuId"
        :item="child"
        :index="child.routerName"
      >
        <el-icon class="tabsIconStyle">
          <component :is="child.icon"> </component>
        </el-icon>
        <template #title> {{ child.text }} </template>
      </el-menu-item>
    </el-sub-menu>

    <el-menu-item v-else :index="item.routerName">
      <el-icon class="tabsIconStyle">
        <component :is="item.icon"> </component>
      </el-icon>
      <template #title>{{ item.text }}</template>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "MenuItem",
  props: ["item", "isCollapseMenu"],
  data() {
    return {
      hasChildren: false,
      isCollapseFlag: false, 
    };
  },
  created() {},
  computed: {},
  mounted() {},
  methods: {},
  watch: {
    // 监听对象的写法（监听页码的变化）
    item: {
      handler(newValue, oldVal) {
        this.hasChildren = newValue.Children && newValue.Children.length > 0;
      },
      deep: true, // 深度监听
      immediate: true, //写上它，初始化时也会调用监听
    },
  },
};
</script>

<style scoped lang='scss'>
/* 你可以在这里添加自定义样式 */
.commonMenuStyle {
  .el-menu-item.is-active {
    color: #00325c;
    background-color: #fff;
  }
  ::v-deep .el-sub-menu:hover {
    color: #166adb !important;
  }
  ::v-deep .el-sub-menu__title:hover {
    color: #166adb !important;
  }

  ::v-deep .el-menu--inline {
    background-color: #0a4577;
  }
}
</style>

下面可不看

a页面使用：