iview table行render渲染不同的组件

Posted web-zqk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iview table行render渲染不同的组件相关的知识,希望对你有一定的参考价值。

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)
}
}
})
])
};
}
技术分享图片

















































以上是关于iview table行render渲染不同的组件的主要内容,如果未能解决你的问题,请参考以下文章

iview table+page组件筛选数据渲染

iview table内渲染proptip组件

IView 使用Table组件时实现给某一列添加click事件

在 iView 的组件中使用 Render 函数渲染内容,可以通过设置 class 属性来自定义样式

iview中对列标题头进行格式渲染render

iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件