关于Element Table 如何自定义表头

有时候你想简单粗暴点，但事实总有不尽人意。。。

很多时候我们的数据应需求都需要以表格的形式去展示，还有增删改查等等的操作，我的项目是vue+element，所以废话不多说，直接上代码：

<el-table
   :data="tableData3"
   tooltip-effect="dark"
   style="width: 100%"                          
   :row-style="rowClass">
   <el-table-column prop="deleteMsg" :render-header="renderHeader">
     <template  slot-scope="scope">
       <a href="javascript:void(0)" @click="alertMsgDia(scope.$index,scope.row)">
         <div class="tabTdSty">
           <div>{{scope.row.deleteMsg}}</div>
           <div><i class="iconfont icon-shijian2"></i>&nbsp;{{scope.row.date}}</div>
         </div>
        </a>
      </template>
    </el-table-column>
</el-table>

那么究竟怎么定义，怎么渲染，下面的代码才是重中之重：

renderHeader(h, { column, $index }) {
   h("span", { class: { curSty: true } }, [
     h("span", { on: { click: this.onClickPop } }, "标记已读")
   ]);
}

最后再唠叨一句，解释下这串代码，参数h呢是createElement的意思，相信这么解释就能明白什么意思了吧，这窜代码呢是通过渲染函数来实现渲染，希望看了本篇文章对你有帮助！有什么意见也可以留言与我交流！