Tabs从左到右删除时出现一次删除多个的问题

[bambuo]

• vuex中的数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// state 数据容器
const state = {
    navigations: []
}
// mutations 同步更新操作
const mutations = {
    update_navigations:(state,data) => {
        state.navigations = [...data]
    }
}
// actions 异步更新操作
const actions = {
    UPDATE_NAVIGATIONS: async ({commit},data) => commit('update_navigations',data)
}
// getters 数据获取操作
const getters = {
    navigations:(state) => state.navigations
}

const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

export default store

• 菜单，点击时回调的事件

<Menu :active-name="JSON.stringify({label:$route.name,path:$route.path})" width="200px" 
@on-select="handleSelect">...

export default {
  name: "Sidebar",
  components: {MenuTree},
  data() {
    return {
      menus: [
        {
          "id": "9c610da4-4d97-4c2a-9e2f-541e9ac13c82",
          "label": "招聘管理",
          "path": "/recruit",
          "icon": "md-person",
          "readable": true,
          "writable": true,
          "executable": true,
          "children": [
            {
              "id": "16e7ac2a-5fd8-4a17-9628-d5fd78d326a9",
              "label": "应聘者",
              "path": "/recruit/candidate",
              "icon": "md-person",
              "readable": true,
              "writable": true,
              "executable": true,
              "children": []
            },
          ]
        }
      ]
    }
  },
  computed: {
    navigations: function () {
      return this.$store.getters.navigations
    },
  },
  methods: {

    handleSelect(object) {
      const navigations = this.navigations
      const item = JSON.parse(object)
      if (!navigations.find(e => e.path === item.path)) {
        this.$store.dispatch('UPDATE_NAVIGATIONS', [
          ...navigations,
          item
        ])
      }
    }
  },
}

• 布局中的设置

<Layout :style="{padding: '0 24px 24px'}">
    <div style="margin: 24px 0;background-color: #FFFFFF">
        <!---->
        <Tabs :value="$route.path" draggable type="card"
                      @on-drag-drop="handleDragDrop"
                      @on-click="handleClick"
                      @on-tab-remove="handleRemove">
            <TabPane label="主页" name="/home" :closable="false" icon="md-home"/>
            <TabPane :key="index" :index="index" :label="item.label" :name="item.path" 
            v-for="(item,index) in navigations" closable/>
        </Tabs>
    </div>

    <Content :style="{padding: '24px', minHeight: '280px', background: '#FFFFFF'}">
        <MainContent/>
    </Content>
</Layout>

computed:{
    navigations() {
      return this.$store.getters.navigations
    }
}

methods:{
    handleDragDrop(old, newly, a, b){
      const navigations = this.navigations
      let tmp = navigations[a-1]
      navigations[a-1] = navigations[b-1]
      navigations[b-1] = tmp
      this.$store.dispatch('UPDATE_NAVIGATIONS',[...navigations])
    },
    handleClick(name){
      this.$router.push({path: name})
    },
    handleRemove(path) {
      const navigations = this.navigations
      let newly = navigations.filter(v => (v.path !== path))
      this.$store.dispatch('UPDATE_NAVIGATIONS',[...newly])
    }
}

[bambuo]

从左到右的关闭,包括中间任意一个标签的关闭都是如此,有点纳闷

[valenzhou]

用 before-remove 属性阻止标签关闭, 然后自己写关闭函数.