如何修改el-sub-menu多级分类下标题文字“更多分类”的名称内容

如图，想要实现的效果如下：

• 点击“更多分类”，文字会跟随分类下的文字变化

• 点击其他一级分类，文字又会变回来

实现思路

1. 先给一级分类和多级分类加上自定义属性attribute
2. 然后多级分类的标题改用动态变量展示submenuTitle
3. 最后每一次选择菜单时，都会调用handleSelect方法，通过其中一个参数component属性来判断，当前点击的菜单是不是多级分类的菜单，如果是则赋值给动态变量submenuTitle，就能实现图片上的效果了

实现代码

<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">

  <el-menu-item index="1" attribute="menu">风控合规</el-menu-item>

  <el-submenu index="2">

    <template slot="title">{{ submenuTitle }}</template>

    <el-menu-item index="2-1" attribute="submenu">阳光工程</el-menu-item>

    <el-menu-item index="2-2" attribute="submenu">后勤保障</el-menu-item>

    <el-menu-item index="2-3" attribute="submenu">工艺技术</el-menu-item>

  </el-submenu>

</el-menu>

export default {

  data() {

    return {

      activeIndex: "1",

      submenuTitle: "更多分类",

    };

  },

  methods: {

    handleSelect(index, indexPath, component) {

      if (component.$attrs.attribute === "submenu") {

        this.submenuTitle = component.$el.innerText;

      } else {

        this.submenuTitle = "更多分类";

      }

    },

  },

};