element ui table render-header自定義表頭信息使用

在使用vue自定義組件內容過程之中,咱們絕大多數狀況下都是經過預先寫好不一樣的html模板，再經過props傳入不一樣的值來渲染不一樣的模板。例如咱們須要實現一個<v-title size='1'>組件。傳入不一樣的size，標題顯示不一樣的字號大小，咱們可能這樣去實現這個組件：

<template>
    <h1 v-if='size==1'><slot></slot></h1>
    <h2 v-if='size==2'><slot></slot></h1>
    <h3 v-if='size==3'><slot></slot></h1>
</template>

這樣作法顯得代碼過多，並且有時候咱們須要真的JavaScript徹底編程能力,即經過js代碼生成html結構，再插入到頁面之中。實現這樣要求咱們須要瞭解render函數。首先咱們先了解三點

1. render方法的實質就是生成template模板；
2. 經過調用一個方法來生成，而這個方法是經過render方法的參數傳遞給它的；
3. 這個方法有三個參數，分別提供標籤名，標籤相關屬性，標籤內部的html內容

下面經過一個element ui自定義表格表頭內容的功能來展現render函數使用。
頁面代碼部分：

<el-table-column  prop='timeSlice' :render-header="renderHeader">
    <template slot-scope="scope">
        {{scope.row.timeSlice}}
    </template>
</el-table-column>

js部分：使用render函數

//自定義列標題內容
    renderHeader(h, { column, $index },index){
       return h('span', {}, [
        h('span', {}, '時間片斷'),
        h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '領先/落後品類=單店平均單量-該品類城市店均單量' }}, [
           h('i', { slot: 'reference', class:'el-icon-question'}, '')
          ])
       ])

    },

實現效果：

能夠看到第一個函數參數即 標籤名，第二個爲屬性名組成的對象，第三個參數表明值，若是值依然包含html標籤，咱們能夠使用數組來定義。以上就是本文所有內容。