iview tabs 可以设置指定的删除

最新推荐文章于 2023-08-25 13:45:00 发布

Moqin89

最新推荐文章于 2023-08-25 13:45:00 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： iview tabs

本文链接：https://blog.csdn.net/MCQq123321/article/details/99952460

vue 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了Vue中函数式组件的使用与优化，通过具体示例展示了如何创建可复用的函数式组件，实现动态Tab面板的渲染，并集成了删除功能。深入解析了组件的props和render函数的应用，为提升Vue应用的性能提供了实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面效果：

主要使用了函数式组件，这里需要优化的是删除后当前选中的

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)
        }
    },
]
}

}