as shown in the picture. How the iview component implements this effect. The user list tab tag cannot be deleted and the user list page is displayed by default. The user list page is a table, that displays one user"s basic information per row. Click on the line to create a new tab tab to display the user details. All new tab can be deleted. You can click from the specific tab to switch to the tab tab of the user list. The difficulty of the problem is that the user list tab cannot be deleted, but it has the same characteristics of other tab. My idea is to write down the user list tab, and the rest traverse the array through v-for. Deletion is achieved through arr.splice (index,1). But now there is a situation of dislocation after the deletion of the new tab? Please give us some advice:
the code is as follows:

< Tabs type= "card": animated= "false" @ on-tab-remove= "handleTabRemove" @ on-click= "getCur" >

               <TabPane label="" :closable="false"> 

                
  
                
  
                
  
                
  
           </TabPane>
             
                <TabPane v-for="(tab,index) in tabs" :closable="true" :key="tab.data.id" :label="tab.data.text"   >
                    {{tab.data.text}}
                </TabPane>
         
              <Button type="ghost" @click="handleTabsAdd" size="small" slot="extra"></Button>
           </Tabs>

export default {
name: "jj",
data () {

   return{
    curTab:0,
    flag:true,
    tabs: [
      {index: 0, data:{id:"000",text: "00"}},
      {index: 1, data:{id:"001",text: "01"}},
      {index: 2, data:{id:"002",text: "02"}},
      {index: 3, data:{id:"003",text: "03"}},
      {index: 4, data:{id:"004",text: "04"}},

    ],

   }
   }

},
methods: {
handleTabRemove (index) {

   this.tabs.splice(name, 1);

}
}