ant design for vue 选项卡组件需求实现

用到的是 1.78版本

1.选用持新增和关闭选项卡，大致大的解决思路：在menu组件中获取点击事件，保存

<!-- 二级菜单 -->
            <a-menu-item
              @click="getTitle(subItem.authName, subItem.path)"
              v-for="subItem in item.children"
              :key="subItem.path"
              :index="subItem.id"
            >
              {
         
  { subItem.authName }}
            </a-menu-item>

2.选项卡组件

<!-- 选项卡 -->
          <a-tabs
            v-model="activeKey"
            hide-add
            type="editable-card"
            @edit="onEdit"
            @change="tabClick"
          >
            <a-tab-pane
              v-for="pane in panes"
              :key="pane.key"
              :tab="pane.title"
              :closable="pane.closable"
              :path="pane.path"
            >
              <router-view></router-view>
            </a-tab-pane>
          </a-tabs>

3.准备数据

4.第一步的方法getTitle获取title、path

getTitle(title_name, menu_path) {
        //获取到数据后定义一条pane对象(一个选项卡的数据)
      var addpane = {
        path: "/" + menu_path,
        key: menu_path,
        title: title_name,
      };
      //避免新增tabsArr中存在的选项卡，title_name是增加的选项卡标题，如果增加的标题存在tabsArr数组中就return出去。
      if (!this.tabsArr.includes(title_name)) {
        this.add(addpane);//如果没问题就调用增加选项卡的功能
        return;
      }
      this.$message.info("选项卡已经打开");
    },

5.按照需求：不能重复选项卡、选项卡不能大于10个

//以下代码都是  methods:
    //选项卡
    callback(key) {
      // console.log(key);
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
      // console.log("targetKey", targetKey);
      // console.log("action", action);
    },

    add(addpane) {
      const panes = this.panes;
      // console.log(addpane.title, addpane.path, addpane.key);
      //这里修改长度就能限制选项卡的个数，功能需求有需要控制增加的选项卡数量不能超过9。
      if (this.tabsArr.length < 9) {
        this.tabsArr.push(addpane.title);//把选项卡的标题，增加到tabsArr（增加的选项卡标题数组）
        this.$router.push(addpane.path);//路由导航到标题的路径
        this.activeKey = addpane.key;//激活当前 tab 面板的key，用addpane.key
        panes.push(addpane);//把数据增加到pannes数组中
        this.panes = panes;
        return;
      }
      this.$message.error("选项卡不能超过10个");
    },

    remove(targetKey) {
        //删除选项卡激活的事件，会把增加的addpane.key传过来。
      let activeKey = this.activeKey;
      let lastIndex;
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const panes = this.panes.filter((pane) => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = panes[0].key;
        }
      }
      this.deleteKey(targetKey);//调用这个函数，该选项卡的title_name从到tabsArr数组删除
      this.panes = panes;
      this.activeKey = activeKey;
    },

    //删除tabsArr中的targetKey元素
    deleteKey(title_name) {
      this.tabsArr = this.tabsArr.filter((item) => {
        return item !== title_name;
      });
    },

    //选项卡点击的事件，每次切换都路由到选项卡的路径，这里的e穿回来是activeKey，之前我已经把路径当做pane.key
    tabClick(e){
      console.log(触发了该事件,e)
      this.$router.push(e)
    },