iview 的render函数就是vue的render函数,iview常用在表格里面自定义内容,下面来看render函数常用的配置:
- 1、 h是createdElement的简写,有3个参数:
语法:render:(h,params)=>{}
render:(h,params) => {
return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容])
}
- h的第三个参数支持数组的形式,数组里面可以是多个h渲染出来的元素对象或字符串 *
h("元素名称或组件名称", {
domProps: { // 原生dom元素的一些属性
value: 1,
type: 'number',
min: 1,
innerHTML:’‘
},
props:{ // 传给组件数据 比喻iview Button的type,size 等等
type:'text',
size:'small'
},
class:{ // 类
btn:true//
},
attrs:{ // html属性,class
id:'box'
class:'brn2'
},
style:{ // 内联样式
},
slot:'slotName', // 组件的插槽
on:{ // 事件 包括组件的自定义事件
click:()=>{
},
'on-change':()=>{
},
},
nativeOn:{ // 类似vue的.native修饰符,自定义组件常用
click:()=>{
}
}
},'文本啊啊啊'
)
-
- 用法包括:
2.1 、 当定义的元素没有其他元素时:
- 用法包括:
render:(h,params)=>{
return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}
图片:
2.2. 当定义的元素中要嵌套其他元素时:
render:(h,params)=>{
return h('div',{style:{width:'100px',height:'100px',background:'#ccc'}},[h('p','内容2')],'内容1')
}
如图可见,当元素嵌套时,元素里面的内容会覆盖父元素的内容,下图中左边的机台图片及信息该怎么显示呢?
我们可以嵌套3层元素来完成,来看看第一二层元素的嵌套:
render:(h, params) => {
return h('div',[
h('div',{style:{float:'left',width:'50px',height:'50px',background:'#ccc'}},[h('p','内容2')]),
h('div',{style:{float:'left',width:'50px',height:'50px',background:'#fc1'}},[h('p','内容2')])
])
}
2.3. 元素如何绑定事件:
on: {
click: () => {console.log('ffff')},
mouseover:() => { console.log('bbb')}
}
2.4. 如何根据后台的数据判断是否显示某些元素:
{
title: '操作',
align:'center',
width:130,
render:(h, params) => {
let status = params.row.Status; //0:空闲 1:游戏 2:未上线
if (status===0){ return h('Button','空闲中') };
if (status===1){ return h('Button','游戏中')};
if (status===2){ return ""} //未上线时不显示}
}