iview UI庫中table的render函式

2021-10-05 14:22:37 字數 1299 閱讀 8891

剛剛接觸乙個專案,一期使用的是iview,檢視文件時發現並未介紹到render函式中類似createelement功能的用法,因此想做乙個相關的分享,希望可以幫到跟我有類似需求的小夥伴們。

iview官方文件中對render是這樣描述的:

自定義渲染列,傳入三個引數 row、column 和 index,分別指當前單元格資料,當前列資料,當前是第幾行,詳見示例

自定義列模板 #

通過給columns資料的項,設定乙個函式render,可以自定義渲染當前列,包括渲染自定義元件。(很強大,下面會講到)

render函式傳入三個引數rowcolumnindex,分別指當前單元格資料,當前列資料,當前是第幾行(其實一般就是第幾條資料)

render函式本質返回的是字串,table 元件在內部對其進行了編譯,如果使用了自定義元件,需要特別注意上下文,編譯後的自定義元件,預設的上下文是i-table所在的上下文,如果想讓元件在指定的例項下編譯,可以給i-table設定屬性content來指定上下文,比如本例指定當前路由頁為上下文。一般情況不需要此配置,但如果你把i-table作為乙個 slot 封裝在其它元件裡,這時content屬性就很有用,比如父級是 $parent,根元件 $root。

以上這些是官方文件描述和基礎用法,這邊部落格記錄的主要目的是記錄接下來的用法。

語法:render:(h,params)=>{}

具體用法:

render:(h,params) => ," 元素的內容"/[元素的內容])

}

定義的元素例如:div、span、p等等

元素的性質如:}、、 on: } // 繫結的事件

元素的內容:可以進行標籤的巢狀或者顯示字串的內容

,

style: ,

on:

}}, '上移'), // 字串文字

h('button', ,

style: ,

on:

}}, '下移'),

h('img', ,

}),h('img', ,

})])

}},

Lua中的table函式庫

一部分的table函式只對其陣列部分產生影響,而另一部分則對整個table均產生影響.下面會分開說明.table.concat table,sep,start,end concat是concatenate 連鎖,連線 的縮寫.table.concat 函式列出引數中指定table的陣列部分從star...

Lua中的table函式庫

一部分的table函式只對其陣列部分產生影響,而另一部分則對整個table均產生影響.下面會分開說明.table.concat table,sep,start,end concat是concatenate 連鎖,連線 的縮寫.table.concat 函式列出引數中指定table的陣列部分從star...

Lua中的table函式庫

一部分的table函式只對其陣列部分產生影響,而另一部分則對整個table均產生影響.下面會分開說明.table.concat table,sep,start,end concat是concatenate 連鎖,連線 的縮寫.table.concat 函式列出引數中指定table的陣列部分從star...