elementUI table 自定義表頭

先看下效果圖html

需求：經過表頭操做配置篩選項，從新請求獲取數據 (並不是對已有數據進行篩選)vue

實現方案 ：react

方案一

查看 element table 相關文檔，發現 render-header 自定義列標題, 網上找到相關案列，參考連接，相似代碼以下：git

renderHeader (h, {column, $index}) {
   return h('span', {}, [
       h('span', {}, column.label + 'aaa'),
       h('el-popover', 
           {
               props: {
                   placement: 'top-start',
                   title: '標題',
                   width: '200',
                   trigger: 'hover',
                   content: '這是一段內容'
               }
           }, 
           [
               h('i', 
               {
                   slot: 'reference', 
                   class: 'el-icon-question',
                   style: 'color:gray; font-size:16px; margin-left:10px;'
               }, '')
           ]
       )
       ])
   }
   
複製代碼

詳細具體介紹參考vue 中的 createElement 參數github

回到我需求上，成功把 <el-date-picker> 組件渲染在表頭上，但在處理 v-model, 綁定事件的時候趕上困難了，選擇好日期後不能雙向數據綁定，同時須要自定義那些事件 (猝...)bash

方案二

時間緊迫，網上有人推薦使用 babel-plugin-transform-vue-jsx ，官方插件，做者尤大大，旨在vue中使用 JSX 的語法，render 函數用 JSX 語法重寫以下babel

renderHeader (h, { column, $index }) {
     return (
       <span class="dateColumn">
         <span class="columeLable">{column.label}</span>
         <span class="columeIcon">
           <el-date-picker
             class="dataTimePick"
             size="mini"
             v-model={this.filters[column.property]}
             type="datetimerange"
             ref={'dataTimePick' + $index}
             picker-options={this.pickerOptions}
             range-separator="至"
             start-placeholder="開始日期"
             end-placeholder="結束日期"
             on-change={this.handleDataRangeChange}
             align="center">
           </el-date-picker>
           <i class="el-icon-date dataIcon"></i>
         </span>
       </span>
     )
   },
複製代碼

注意：在vue 中編寫 JSX 和在 react 中仍是有所區別的markdown

例如： react的class用的是 className，vue卻用的 class ...ide

最後：實現邏輯功能以後，在樣式上經過給 <el-date-picker> 組件定位、設置 opacity ，z-index 實現點擊右邊小圖標展開組件函數