iview如何实现第一个不能关闭但是其他tab选项卡可关闭的tab标签页

Question

如图。iview组件如何实现这个一个效果。用户列表tab标签不可删除，默认显示，用户列表页是一个table，每一行显示一个用户的基本信息。点击该行，新建一个tab标签页，显示用户详情。新增的tab均可删除。可以由具体标签页点击切换至用户列表tab标签页。问题的难点就在用户列表tab不可删除，但是又具有其他tab的相同特征。我的思路是把用户列表tab写死，其他的通过v-for遍历数组。删除的时候通过arr.splice（index,1)实现。但是现在出现了新增tab删掉以后错位的情况？请大家指点下：
代码如下：

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

               <TabPane label="用户列表" :closable="false"> 

                <p>用户列表数据用户列表数据用户列表数据用户列表数据用户列表数据用户列表数据</p>  
                <p>用户列表数据用户列表数据用户列表数据用户列表数据用户列表数据用户列表数据</p>  
                <p>用户列表数据用户列表数据用户列表数据用户列表数据用户列表数据用户列表数据</p>  
                <p>用户列表数据用户列表数据用户列表数据用户列表数据用户列表数据用户列表数据</p>  
           </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);

}
}

Answer 1

把closable属性写到需要关闭按钮的tab-panel里面，不要写在tabs父级属性里。