elementui自定义表头

前几天接到了一个这样的需求

整个项目主要用的element-ui+vue，于是就去element-ui中寻找,找到了自定义表头这个选项

就是这个样子,虽然跟我的需求差别很大，但是足够了

然后就按照demo的代码开始进行工作,官网的代码是这么写的

<el-table-column
  align="right">
  <template slot="header" slot-scope="scope">
    <el-input
      v-model="search"
      size="mini"
      placeholder="输入关键字搜索"/>
  </template>
  <template slot-scope="scope">
    <el-button
      size="mini"
      @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
    <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
  </template>
</el-table-column>

直接复制粘贴就对了

？！

but

页面并没有什么变化，我又重新检查了一遍代码，页面确实是没有变化。

眼看距提测日期越来越近，只能另寻他法。

看到有网友提供的方法

<template>
    <el-table-column
      width="300"
      align='center'
      :render-header="renderHeaderMonth"
    >
    </el-table-column>
</template>

<script>
 export default {
     methods:{
         renderHeaderMonth (h,{column}) {
             return h(
                 'div',//这里写标签的名称
                 {style:'line-height:1.2;padding-top:5px;'},//这里写样式
                 [
                    h('span',{style:'color:#ccc'},'我是标签的内容')//标签内容可以出现变量
                 ],//如果是字符串的话，指的是标签里面的内容，如果是数组，表示这个变迁包含别的 标签
             )
         }
     }
 }
</script>
**注：只展示部分需要代码，根据个人需要进行粘贴**
//这个方法element-ui有对应的介绍，在1.4。13版本的api中有提到这个方法

尝试了一下，果然可以用了

但是第二天，又接到了一个需求，不仅要自定义表头，表头里面还要求插入小图片

我想了很多办法，利用上面的方法始终不能添加进去img元素的src属性内容

又在网上找到了一位别的大神方法，代码如下

<template>
    <el-table-column 
      property="qidian" 
      width="80" 
      :render-header="renderStart" 
      align="center"
     ></el-table-column>
</template>

<script>
export default {
    methods:{
        renderStart(h, { column }) {
          return (
            <span>
              <img
                style="display:inline-block;vertical-align:middle;"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB90RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgOLVo0ngAAAD0SURBVDiNzdQxC8IwEIbht0ERRHDqJIKCe10dLLgJgvhfxUGpuugqOOsiuHSwYKGTSBxEUJqmp3TwGxPyJBcucbTWmgKjisQAStbZ6xX2ezifQSloNsHzoFbLXOIYS9Ya1muYz+F2+5yrVGA8hl7vC3A2g+XSengmE/D91HD6Dk8nWK3sGMB0CpeLANxsniXn5X6H7VYAHg752CvHowCMYzmYJALQ0hKpVKsCsNORg+22ADS0gjFKQb8vAFstGToageumhrNfymIBQfBsj/eUyzAcwmBg3McMvhJFsNtBGILjQKMB3S7U65lL7OAPKfz7+n/wAXA0T/sogItrAAAAAElFTkSuQmCC"
              />
              起点
            </span>
          )
        },
    }
}
</script>

这个方法比第一次查到的方法更好用，而且完美的解决了目前所遇到的不能插入图片的问题。

到这里为止，基本可以告一段落了，所有的问题都已经完美解决了。

如果仍然还是有解决不了的问题，欢迎私聊或者将问题留在评论区，大家一起来想办法。