spfm-market-front/src/components/p-menu-item.vue

<template>
  <div>
    <template v-for="(menu, index) in menuData">
      <el-submenu
        :key="menu.index"
        :index="
          menu.rountPath == '' || menu.rountPath == '#'
            ? menu.name + index
            : menu.rountPath
        "
        v-if="menu.children"
        @click="handelRouterTo(menu)"
      >
        <template slot="title">
          <i style="color: #409eff !important" class="el-icon-location"></i>
          <el-tooltip
            class="item"
            effect="dark"
            :content="menu.name"
            placement="right"
            v-if="menu.name.length > 9"
            ><span>{{ menu.name }}</span>
          </el-tooltip>
          <span v-else>{{ menu.name }}</span>
        </template>
        <MenuTree :menuData="menu.children"></MenuTree>
      </el-submenu>
      <el-menu-item
        v-show="menu.systemflag != 1"
        @click="handelRouterTo(menu)"
        :index="menu.rountPath == '' ? menu.name : menu.rountPath"
        :key="menu.index"
        v-else
      >
        <el-tooltip
          class="item"
          effect="dark"
          :content="menu.name"
          placement="right"
          v-if="menu.name.length > 9"
          ><span>{{ menu.name }}</span>
        </el-tooltip>
        <span v-else>{{ menu.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "MenuTree",
  props: ["menuData"],
  methods: {
    handleOpen(e) {
      if (e.indexOf("/") != -1) {
        if (this.$route.path != e) {
          this.$router.push(e);
        }
      }
    },
    handleClose() {},
    handelRouterTo(item) {
      if (item.systemflag == "1") {
        return;
      }
      for (let i = 0; i < this.$store.state.tabList.length; i++) {
        if (this.$store.state.tabList[i].rountPath === item.rountPath) {
          this.$store.state.tabList[i] = item;
        }
      }
      let set = new Set([...this.$store.state.tabList, item]);
      set.add(item);
      this.$store.commit("setDefaultActive", item.rountPath);
      this.$store.commit("setTabList", Array.from(set));
    },
  },
};
</script>
<style lang="scss" scoped>
.el-submenu {
  border-bottom: 1px solid #ececec;
}

.is-opened .el-submenu__title {
  /* background-color: #ecf5ff !important; */
  background-color: #dddddd !important;
  border-left: 3px solid #34a0ce;
}
.el-submenu__title:hover {
  background-color: #bbbbbb !important;
  border-left: 3px solid #34a0ce;
}
.is-opened .el-submenu__title:hover {
  background-color: #bbbbbb !important;
  border-left: 3px solid #34a0ce;
}
::v-deep .el-submenu__title {
  padding-left: 30px !important;

  .el-submenu__icon-arrow {
    position: absolute;
    right: 8px;
  }
  /* background-color: #ecf5ff;
  border-radius: 30px;
  margin-bottom: 10px; */
}

.el-submenu.is-active .el-submenu__title {
  /* background-color: #ecf5ff; */
}
</style>
<style lang="scss" scoped>
.el-menu-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50px;
  padding-left: 60px !important;
  background: #2e7dcf;
  span {
    padding-right: 10px;
    color: #bdddff;
  }
}

.el-menu-item:hover {
  background: #577494;
}

.el-menu--vertical {
  .el-menu-item {
    width: auto !important;
    span {
      padding-right: 0;
    }
  }
}

.bgc {
  background-color: #f56c6c;
}

.bgcChild {
  background-color: #f56c6c;
}
</style>