动态菜单栏

Posted 2021-09-03 Ｈｅｄｇｅｈｏｇ

要求

根据接口数据动态设置菜单，层级层列都不确定。同时获取到菜单栏之后，每个栏位还需要单独二次请求接口获取栏位的数量。父节点数量需要前端处理，将所有子节点栏位加起来。

三个未知：

栏位未知，层级未知，详情页面未知。

问题

1. 菜单栏层级列数都不确定，需要根据后端数据渲染，怎么处理？
   这边需要用到组件递归。项目用的是element的el-menu。
2. 菜单栏层级列数都不确定，每个栏位需要请求不同的接口获取数据，且要渲染到对应栏位展示。不确定的多层栏位怎么请求接口。
   设置了一个变量，将菜单栏赋值。然后变量递归，根据获得的接口数据对变量参数进行修改。
3. 且怎么更新多不确定的多层栏位的组件上？
   对组件进行ref设置。递归组件的refs，依次强制更新。
4. 点击菜单栏跳转不同详情页面，栏位数量未知那详情页面也位置，页面怎么处理才能实时根据不同菜单展示数据？
   和后端确定，栏位信息设置type，且type相同需要跳转相同模版页面，根据携带的数据不同，页面展示不同数据。router-view使用keep-alive，将路由信息设置为key。这样路由信息不同页面会重新actived。再设置几套页面模板。根据type不同跳转不同模板进行页面渲染。
5. 详情页面的信息都在菜单栏上，怎么在点击的时候能取得这些栏位信息。
   可以放在路由meta上，点击菜单的时候动态设置meta。详情页进去的时候，钩子函数监听获取这些数据。
6. 层级未知，父节点数量需要将所有子节点栏位加起来，怎么相加？
   使用computed，传入你当前节点的数据，递归数据当前节点数据。这样可以计算你下面所有子节点的数量。

// index.vue 父组件 菜单栏部分
<template>
  <el-menu :default-active="defalutActive" @select="menuSelect">
    <el-menu-item class="gray" index="-1">
      <span class="total">
        总数：
        <em>{{ totalCount || 0 }}</em>
      </span>
    </el-menu-item>
    <deep-menu :menuData.sync="allNav" ref="deepMenu" />
  </el-menu>
</template>
<script>
export default {
  methods: {
    //循环菜单栏获取数量
    loadCount() {
      let vue = this;
      if (!vue.keyword) {
        vue.loading;
        return;
      }
      vue.loading = false;
      this.totalCount = 0;
      var allNav = JSON.parse(JSON.Stringify(this.allNav));
      allNav.forEach((element, index) => {
        deepArray(element);
      });
      //数组递归 请求接口获取数量    
      function deepArray(element) {
        if (element.isShow !== 1) return;
        if (element.children.length > 0) {
          element.count = 0;
          element.children.forEach((ele, idx) => {
            deepArray(ele);
          });
        } else {
          vue.getCount(element).then((count) => {
            // 获取栏位数量之后更新组件，数量
            element.count = count;
            vue.totalCount += count;
            vue.allNav = allNav;
            vue.$refs.deepMenu.reload();
          });
        }
      }
    },
    //请求url获取数量
    getCount(ele) {
      return new Promise((resolve, reject) => {
        if (!ele.hasownProperty("countUrl") || !ele.countUrl) return;
        commonAxios("post", "/search/" + ele.countUrl + "/count", {
          keyword: this.keyword,
        }).then((res) => {
          if (res && res["intCode"] && res["intCode"] == "200") {
            return resolve(Number(res["data"].total) || 0);
          } else {
            this.$message.error((res && res["message"]) || "数据获取失败!");
          }
        });
      });
    },
  },
};
</script>

// deep-menu.vue
<--
@Date:2021-08-2709:04:10
*@LastEditTime:2021-08-2715:12:29
@Description :智搜菜单栏深度嵌套
-->
<template>
  <div>
    <div v-for="(items, indexs) in menuData" :key="items.id">
      <el-menu-item
        v-if="(items.isShow = 1 && items.children.length == 0)"
        :index="indexs + \'-\' + items.id"
      >
        <span slot="title">
          {{items.name} }
          <em class="fn-right">{{ menuCount(items) }} </em> //计算数量
        </span>
      </el-menu-item>
      <el-submenu
        v-else-if="items.isShow === 1 && items.children.length > 0"
        :index="indexs + \'-\' + items.id"
      >
        <template slot="title">
          <span>
            {{ items.name }}
            <em class="fn-right">{{ menuCount(items) }} </em>
          </span>
        </template>
        <deep-menu
          menuData.sync="items.children"
          :ref="\'deepMenu-\' + items.id"
        />
      </el-submenu>
    </div>
  </div>
</template>
<script>
export default {
  name: "deepMenu",
  props: {
    menuData: {
      type: Array | Object,
      defalut: [],
    },
  },
  computed: {
    //计算该节点下面所有子节点的数量相加
    menuCount() {
      return function (element) {
        let ls_return = 0;
        deepAdd(element);
        return ls_return;
        function deepAdd(element) {
          if (element.children.length > 0) {
            element.children.forEach((ele) => {
              deepAdd(ele);
            });
          } else {
            ls_return += Number(element.count) || 0;
          }
        }
      };
    },
  },
  methods: {
    reload() {
      this.$forceUpdate();
      deepUpdate(this.$refs);
      function deepUpdate(element) {
        if (Object.prototype.toString.call(element) == "[object Object]") {
          for (let key in element) {
            let ls_ref = element[key][0].$refs;
            element[key][0].$forceUpdate();
            if (Object.keys(ls_ref).length > e) {
              element[key][e].$forceUpdate();
              deepUpdate(ls_ref);
            }
          }
        }
      }
    },
  },
};
</script>