elementUI table 自定義表頭

Alone1469546971808發表於2018-09-25
UI

先看下效果圖

elementUI table 自定義表頭

需求 ： 通過表頭操作配置篩選項，重新請求獲取資料 (並非對已有資料進行篩選)

實現方案 ：

方案一

檢視 element table 相關文件，發現 render-header 自定義列標題, 網上找到相關案列，參考連結，類似程式碼如下：

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 引數

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

方案二

時間緊迫，網上有人推薦使用 babel-plugin-transform-vue-jsx ，官方外掛，作者尤大大，旨在vue中使用 JSX 的語法，render 函式用 JSX 語法重寫如下

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 中還是有所區別的

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

最後：實現邏輯功能之後，在樣式上通過給 <el-date-picker> 元件定位、設定 opacity ，z-index 實現點選右邊小圖示展開元件

相關文章