1、render渲染函數的介紹

字符串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。該渲染函數接收一個 createElement 方法作為第一個參數用來創建 VNode。

如果組件是一個函數組件，渲染函數還會接收一個額外的 context 參數，為沒有實例的函數組件提供上下文信息。

2、如何使用render函數？

下面是vue官網的例子var?getChildrenTextContent?=?function?(children)?{???return?children.map(function?(node)?{?????return?node.children?????????getChildrenTextContent(node.children)???????:?node.text???}).join('')?}?Vue.component('anchored-heading',?{???render:?function?(createElement)?{?????//?創建?kebabCase?風格的ID?????var?headingId?=?getChildrenTextContent(this.$slots.default)???????.toLowerCase()???????.replace(/\W+/g,?'-')???????.replace(/(^\-|\-$)/g,?'')?????return?createElement(???????'h'?+?this.level,???????[?????????createElement('a',?{???????????attrs:?{?????????????name:?headingId,?????????????href:?'#'?+?headingId???????????}?????????},?this.$slots.default)???????]?????)???},???props:?{?????level:?{???????type:?Number,???????required:?true?????}???}?})

3、iview table組件介紹

主要用于展示大量結構化數據。

支持排序、篩選、分頁、自定義操作、導出 csv 等復雜功能。

4、iview table組件的使用?????

??

渲染成如下表格：

5、iview table render函數和renderHeader介紹

render:

自定義渲染列，使用 Vue 的 Render 函數。傳入兩個參數，第一個是 h，第二個為對象，包含 row、column 和 index，分別指當前行數據，當前列數據，當前行索引，詳見示例。 學習 Render 函數的內容

renderHeader:

自定義列頭顯示內容，使用 Vue 的 Render 函數。傳入兩個參數，第一個是 h，第二個為對象，包含 column 和 index，分別為當前列數據和當前列索引。

6、iview table render函數的使用?????

??

渲染成如下table

7、iview render和renderHeader結合自定義組件，渲染table表格

QiDropdown.vue組件代碼如下:??

0"?style="cursor:pointer">?????????????{{content}}?????????????????????????????????????????????????????????????????{{item.name}}??????????????????????????????

8、父組件引入QiDropdown組件并應用到table 的render和renderHeader函數中import?QiDropdown?from?'@/components/QiDropdown'?export?default?{?????name:?'email-list',?????components:{?????????QiDropdown?????},?...?columns:?[?????????????????{?????????????????????title:?'標注',?????????????????????key:?'callout',?????????????????????align:'center',?????????????????????renderHeader:(h,params)=>{?????????????????????????return?h(QiDropdown,{?????????????????????????????props:{?????????????????????????????????????????????????????????????????placement:'bottom-start',?????????????????????????????????showArrow:true,?????????????????????????????????content:'標注',?????????????????????????????????data:this.flags?????????????????????????????},?????????????????????????????on:{?????????????????????????????????'on-choosed':(value)=>{?????????????????????????????????????????????this.queryForm.callout?=?value;?????????????????????????????????????????????????????????????????this.getResumeFromEmailBy();?????????????????????????????????}?????????????????????????????}?????????????????????????});?????????????????????},?????????????????????render:(h,params)=>{?????????????????????????return?h(QiDropdown,{?????????????????????????????????props:{?????????????????????????????????????content:params.row.callout||'',?????????????????????????????????????data:this.flags.slice(1)?????????????????????????????????},?????????????????????????????????on:{?????????????????????????????????????'on-choosed':(value)=>{?????????????????????????????????????????this.choosedFlag(params.row.id,value);?????????????????????????????????????????}?????????????????????????????????}?????????????????????????????},[??????????????????????????????????h('DropdownItem',?????????????????????????????????{?????????????????????????????????????slot:?'diy',?????????????????????????????????????style:{?????????????????????????????????????????color:'#2d8cf0'?????????????????????????????????????},?????????????????????????????????????props:{?????????????????????????????????????????name:'add',?????????????????????????????????????????divided:true?????????????????????????????????????}?????????????????????????????????},??????????????????????????????????'添加并標注'),?????????????????????????????????h('DropdownItem',?????????????????????????????????{?????????????????????????????????????slot:?'diy',?????????????????????????????????????style:{?????????????????????????????????????????color:'#2d8cf0'?????????????????????????????????????},?????????????????????????????????????props:{?????????????????????????????????????????name:'clear'?????????????????????????????????????}?????????????????????????????????},??????????????????????????????????'清除該標注')?????????????????????????????]);??????????????????????????????????????????????}?????????????????},??????????????????...

渲染成如下所示：

9、總結：

1)有了render函數加上自定義組件，那么你再也不怕iview table組件功能的單調了，一開始我也以為iview table功能太少，現在有了它，你可以實現你任何想實現的表格了，非常簡單！

2)iview Dropdown組件上一定要加 transfer 屬性，否則它不能正常顯示出來

3)render函數可以使用slot，如我的QiDrowdown組件里面有一個slot name=diy，那它在render函數里面就是要寫到QiDrowdownr 數組中，如：h(QiDrowdown,?{//這里寫QiDrowdown屬性props、事件on、樣式style等等},?[//這里可以寫slot組件，也可以是其它組件，如果是slot你要這樣寫：?????h('DropdownItem',?????????????????????????????????{?????????????????????????????????????slot:?'diy',//記住這里要寫上QiDrowdown組件slot的name?????????????????????????????????????style:{?????????????????????????????????????????color:'#2d8cf0'?????????????????????????????????????},?????????????????????????????????????props:{?????????????????????????????????????????name:'add',?????????????????????????????????????????divided:true?????????????????????????????????????}?????????????????????????????????},??????????????????????????????????'添加并標注'),??????????????????????????????????這樣渲染就等于是這樣寫：????????]) https://segmentfault.com/a/1190000015970367

總結

以上是生活随笔為你收集整理的iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。