Custom header elementui

A few days ago received such a demand

The entire project is mainly used in the element-ui + vue, then went to look for element-ui, found a custom header This option

Is like this, though with very different for my needs, but enough

Then in accordance with the code of the demo started work, the official website of the code is written so

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

Copy and paste on the right

？！

but

Page does not change, I again checked the code again, the page really is no change.

Seeing from the mentioned measurement date gets closer, only to find another method.

See method provided by users

<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中有提到这个方法

Tried it, it really can be used

But the next day, we received a demand, not only to customize the header, the header which also requires the insertion of small pictures

I think a lot of ways, using the above method still can not be added into the src attribute of the img element content

And the Internet to find a big God other method, as follows

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

This method than the first method found in better use, and the perfect solution to the problem can not be inserted images are currently encountered.

Up to this point, you can basically come to an end, all the problems have been the perfect solution.

If you still are still not solve the problem, please whisper or questions left in the comments area, everyone will work together to find solutions.