iview table行render渲染不同的组件

最新推荐文章于 2022-08-23 13:43:03 发布

weixin_30488085

最新推荐文章于 2022-08-23 13:43:03 发布

阅读量300

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-zqk/p/9593672.html

本文介绍了一种在Vue中根据表格的不同行渲染不同组件的方法。具体实现是通过判断行索引来选择性地显示Select、Input或InputNumber等组件，并详细展示了如何通过Vue的渲染函数实现这一目标。

table不同的行，相同的列渲染不同的组件，如图1：第一行渲染selece，第二行渲染input

render:(h,params)=>{
    if(params.index === 0){    //以params.index为条件渲染
        return h('div',[
            h('Input',{
                props:{

                },
                style:{},
                on:{
                    'on-change':(e)=>{
                        console.log(e.target.value)
                    }
                }
            })
        ])
    };
if(params.index === 1){
        return h('div',[
            h('Select',{
                props:{

                },
                style:{},
                on:{
                    'on-change':(e)=>{
                        console.log(e.target.value)
                    }
                }
            })
        ])
    };
    if(params.index === 2){
        return h('div',[
            h('InputNumber',{
                props:{
                    min:0
                },
                style:{
                    width:'100%'
                },
                on:{
                    'on-change':(e)=>{
                        console.log(e.target.value)
                    }
                }
            })
        ])
    };
}