双击动态添加标签页

template

<!-- 标签页 -->
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item) in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
          </el-tab-pane>
        </el-tabs>

Js

//双击往本地添加点击的名和类型还有id
	dbclicks() {
		this.treeClickCount++
      	var index
		this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          this.treeClickCount = 0
          return
        } else if (this.treeClickCount > 1) {
          // 双击的操作
          this.treeClickCount = 0
          if (data.dbclickopen === true) {
            this.$store.commit('getSaveId', data.id)
            if (this.tabNames.length === 0) {
              this.tabNames.push({ name: data.name, type: data.type, id: data.id })
            } else {
              var names = JSON.parse(sessionStorage.getItem('content'))
              index = names.findIndex((item) => {
                return item.id === data.id
              })
              if (index === -1) {
                this.tabNames.push({ name: data.name, type: data.type, id: data.id })
              }
            }
            sessionStorage.setItem('content', JSON.stringify(this.tabNames))
            this.addTab(this.editableTabsValue)
          }
        }
      }, 300)

// 添加tree对应节点的tab
    addTab() {
      this.editableTabs = []
      var name = JSON.parse(sessionStorage.getItem('content')) ? JSON.parse(sessionStorage.getItem('content')) : []
      // var newTabName = ++this.tabIndex + ''
      for (var i = 0; i < name.length; i++) {
        this.editableTabs.push({
          title: name[i].name,
          name: name[i].id + '',
          type: name[i].type,
          id: name[i].id
        })
        this.editableTabsValue = name[i].id + ''
      }
      this.$store.commit('editableTabsValue', this.editableTabsValue)
    },

// 删除tree对应节点的tab
    removeTab(targetName) {
      var tabs = this.editableTabs
      var activeName = this.editableTabsValue
      this.tabNames.forEach((item, k) => {
        var id = item.id + ''
        if (id === targetName + '') {
          this.tabNames.splice(k, 1)
          sessionStorage.setItem('content', JSON.stringify(this.tabNames))
        }
      })
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            var nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
    }