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 实现点击右边小图标展开组件