iview 的render函數(shù)就是vue的render函數(shù)苹祟，iview常用在表格里面自定義內(nèi)容慷吊，下面來看render函數(shù)常用的配置：
- 1胎署、 h是createdElement的簡寫，有3個參數(shù)：
語法：render:(h,params)=>{}
render:(h,params) => {
return h(" 定義的元素 "，{ 元素的性質(zhì) }，" 元素的內(nèi)容"/[元素的內(nèi)容])
}
h的第三個參數(shù)支持?jǐn)?shù)組的形式，數(shù)組里面可以是多個h渲染出來的元素對象或字符串
h("元素名稱或組件名稱", {
domProps: { // 原生dom元素的一些屬性
value: 1,
type: 'number',
min: 1待错，
innerHTML：’‘
},
props:{ // 傳給組件數(shù)據(jù) 比喻iview Button的type,size 等等
type:'text',
size:'small'
}，
class:{ // 類
btn:true//
}烈评，
attrs:{ // html屬性,class
id:'box'
class:'brn2'
}火俄，
style:{ // 內(nèi)聯(lián)樣式
},
slot:'slotName', // 組件的插槽
on:{ // 事件 包括組件的自定義事件
click:()=>{
},
'on-change':()=>{
},
}，
nativeOn:{ // 類似vue的.native修飾符讲冠，自定義組件常用
click:()=>{
}
}
},'文本啊啊啊'
)
- 用法包括：
2.1. 當(dāng)定義的元素沒有其他元素時：
- 用法包括：
render:(h,params)=>{
return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}
image.png
2.1. 當(dāng)定義的元素中要嵌套其他元素時：
render:(h,params)=>{
return h('div',{style:{width:'100px',height:'100px',background:'#ccc'}},[h('p','內(nèi)容2')],'內(nèi)容1')
}
image.png
如圖可見瓜客，當(dāng)元素嵌套時，元素里面的內(nèi)容會覆蓋父元素的內(nèi)容，下圖中左邊的機(jī)臺圖片及信息該怎么顯示呢谱仪？
image.png
我們可以嵌套3層元素來完成玻熙，來看看第一二層元素的嵌套：
render:(h, params) => {
return h('div',[
h('div',{style:{float:'left',width:'50px',height:'50px',background:'#ccc'}},[h('p','內(nèi)容2')]),
h('div',{style:{float:'left',width:'50px',height:'50px',background:'#fc1'}},[h('p','內(nèi)容2')])
])
}
2.3. 元素如何綁定事件：
on: {
click: () => {console.log('ffff')},
mouseover:() => { console.log('bbb')}
}
2.4. 如何根據(jù)后臺的數(shù)據(jù)判斷是否顯示某些元素：
{
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 ""} //未上線時不顯示}
}
