elementui的树形导航栏和tabs标签以及vue-router简单的结合

发布于 / 前端 / 0 条评论

今天来简单看下如何把element-ui的树形导航栏和tabs标签以及vue-router简单的结合起来。

我们可以先看一下官网给的示例:

官网给的示例是没有左边的标签的,我们再看一下左边的标签的代码:

这个就不多说,代码写的很清楚,我们想添加tabs的话,只要添加上述的添加tabs的方法,即addTab

下面给出添加tab的代码:

  addTab(targetName) {
    let isExist = false;
    const newTab = {
      title: targetName,
      content: targetName
    }
    for (let item of this.editableTabs) {
      if (item.title == newTab.title) {
        isExist = true;
        this.editableTabsValue = item.name;
      }
    }
    if (!isExist) {
      this.editableTabs.push(newTab);
      this.editableTabsValue = newTabName;
      let newTabName = ++this.tabIndex + '';
      newTab.name = newTabName;
      this.$router.push({
        "name": newTab.content
      })
      this.editableTabsValue = newTab.name;
    }

  },

下面给出解释:

下面给出删除Tab的代码:

      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        let index = 0;
        for (let i = 0; i < this.editableTabs.length; i++) {
          if (this.editableTabs[i].name == targetName) {
            index = i - 1;
            break;
          }
        }
        this.$router.push({
          "name": this.editableTabs[Number(index)]["content"]
        })
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },

下面给出解释:

然后是切换tab:

  switchTab(tab, event) {
    let id = event.target.getAttribute("id").split("-")[1];
    this.$router.push({
      "name": this.editableTabs[Number(id) - 1]["content"]
    })
  }

下面给出解释:

以上就是 element-ui的树形导航栏和tabs标签以及vue-router简单的结合

转载原创文章请注明,转载自: ت » elementui的树形导航栏和tabs标签以及vue-router简单的结合
Not Comment Found