iview tabs 可以設置指定的刪除

頁面效果：

主要使用了函數式組件，這裏需要優化的是刪除後當前選中的

render.js

export default {
    name: 'RenderCell',
    functional: true,
    props: {
        render: Function,
        name:String,
        index:Number
    },
    render: (h, ctx) => {
        console.log(ctx)
        let params={
            index:ctx.props.index,
          name:ctx.props.name,
            slotsDefault:ctx.slots().default,
        }
        return ctx.props.render(h,params);
    }
};

在vue頁面

html  ：

 <Tabs>
           
                <rend :index="index" :name="data.name" :render="data.render"  v-for="(data,index) in tabData" :key="data.name">
                    <div style="color: red">水電費水電費第三方第三方</div>
                </rend>
        </Tabs>

js： 

import rend from './render'
components:{rend}
data(){

return{

tabData:[
    {
        name:"測試1",
        render:(h,{index,name,slotsDefault})=>{
           return h('TabPane',{
               props:{
                   label:()=>{
                       return h("span",{},[
                         '可以關閉',
                         h('Icon',{
                             props:{type:"md-close"},
                             style:{color:'#000',marginLeft:'20px'},
                             on:{
                                 click:()=>{
                                     this.tabData.splice(index,1)
                                     event.preventDefault()
                                     event.stopPropagation()
                                 }
                             }
                         })
                       ])
                   },
                   name:'dddd1',
               }
           },slotsDefault)
        }
    },
    {
        name:"測試21",
        render:(h,{index,name})=>{
            return h('TabPane',{
                props:{
                    label:'dddd2',
                    name:'dddd2',
                }
            },name+index)
        }
    },
    {
        name:"測試31",
        render:(h,{index,name})=>{
            return h('TabPane',{
                props:{
                    label:'dddd55',
                    name:'dddd3',
                }
            },name+index)
        }
    },
]
}

}