element table標題欄自定義樣式

element ui裏面的table組件很是強大，可是在實際開發中，會遇到自定義表頭樣式，這個時候就須要用到renderHeader函數了

<el-table-column
  label="Data"
>
</el-table-column>
複製代碼

原有樣式只能知足爲自定義label，展現以下，表頭只有Data

需求是日期挪移到表頭，第一行顯示年月，第二行顯示日，週末高亮

首先想到的只能是renderHeader函數，具體使用方法以下，注意return嵌套以及標籤的block屬性，class能夠自定義，數據最好是單獨處理一下，通常返回的是時間戳，本次例子處理格式爲：[{year:'2021-01',days:['10','11']}]，時間戳處理不作累述

<el-table-column
  label="Data"
  :render-header="renderHeader"
>
</el-table-column>

renderHeader(h, { column }) {
  return h('div', { id: 'h-id' }, [
    this.endDate.map((val, key) => {
      return h('span',
        {},
        [h('span', val.year)])
    }),
    h('div', { id: 'h-id' }, [
      this.endDate.map((val, key) => {
        return val.days.map((item, index) => {
          return h('span',
            { class: 'rendercolor'},
            [h('span', item)])
        })
      })
    ])
  ])
}
複製代碼

Render（函數渲染）

Vue 推薦在絕大多數狀況下使用模板來建立你的 HTML。然而在一些場景中，你真的須要 JavaScript 的徹底編程的能力。這時你能夠用渲染函數，它比模板更接近編譯器。

簡單的說，在 Vue 中咱們使用模板 HTML 語法組建頁面的，使用 Render 函數咱們能夠用 Js 語言來構建 DOM。

在深刻渲染函數以前，瞭解一些瀏覽器的工做原理是很重要的。如下面這段 HTML 爲例：

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>
複製代碼

當瀏覽器讀到這些代碼時，它會創建一個「DOM 節點」樹來保持追蹤全部內容，如同你會畫一張家譜樹來追蹤家庭成員的發展同樣。

上述 HTML 對應的 DOM 節點樹以下圖所示：

生成一個標籤，咱們能夠

<h1>{{ blogTitle }}</h1>
複製代碼

還能夠

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}
複製代碼

createElement與render的碰撞

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個 HTML 標籤名、組件選項對象，或者
  // resolve 了上述任何一種的一個 async 函數。必填項。
  'div',

  // {Object}
  // 一個與模板中 attribute 對應的數據對象。可選。
  {
    // (詳情見下一節)
  },

  // {String | Array}
  // 子級虛擬節點 (VNodes)，由 `createElement()` 構建而成，
  // 也可使用字符串來生成「文本虛擬節點」。可選。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)
複製代碼

基本上全部的代碼習慣都和直接模板書寫是同樣的，包括點擊事件，不過，v-if不能直接寫在標籤裏面

<el-table-column
  label="Data"
  :render-header="renderHeader"
  v-if="kaqi==996"
>
</el-table-column>
複製代碼

上述例子，一旦renderHeader渲染完成，將沒法隱藏，若是須要進行判斷，只能在render函數裏面進行操做，以下

<el-table-column
  label="Data"
  :render-header="renderHeader"
>
</el-table-column>

renderHeader(h, { column }) {
  if(this.kaqi === 996){
  	return h('div', { id: 'h-id' }, [
      this.endDate.map((val, key) => {
        return h('span',
          {},
          [h('span', val.year)])
      }),
      h('div', { id: 'h-id' }, [
        this.endDate.map((val, key) => {
          return val.days.map((item, index) => {
            return h('span',
              { class: 'rendercolor'},
              [h('span', item)])
          })
        })
      ])
    ])
  }else {
     console.log('請給我點贊，謝謝你們')
  }
},
複製代碼