這里記錄的是iviewui框架中render函數(shù)的用法。如下：
語法：render:(h,params)=>{}
具體用法：
render:(h,params) => {
return h(" 定義的元素 "嗜价，{ 元素的性質(zhì) }渊啰，" 元素的內(nèi)容"/[元素的內(nèi)容])
}
案例：
當(dāng)定義的元素沒有其他元素時：
render:(h,params)=>{
return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}
image.png
當(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)容
下圖中左邊的機臺圖片及信息該怎么顯示呢惕艳？
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')])
])
}
image.png
其實上面的代碼已經(jīng)是嵌套的三層晨缴，如下的層次圖，
即具體的我們想要表達的內(nèi)容峡捡，可以在[]中顯示
image.png
最后完成的如下圖：
image.png
圈起來的便是層級的嵌套
元素如何綁定事件：
on: {
click: () => {console.log('ffff')},
mouseover:() => { console.log('bbb')}
}
如何根據(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 ""} //未上線時不顯示}
}
