elementui自定义表头

约定不等于承诺〃 2022-04-23 00:48 442阅读 0赞

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

![这个表格的上面有两行显示文字，而且是变量][8739]

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

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

![这是从element-ui官网截图出来的][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中有提到这个方法

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

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

![自定义图标表头][8838]

我想了很多办法，利用上面的方法始终不能添加进去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>

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

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

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

[8739]: https://note.youdao.com/yws/public/resource/30350f86c7d798177d83e00cadce54eb/xmlnote/F5CFECC3FF214D79BF0D13A268DD2769/8739
[element-ui]: https://note.youdao.com/yws/public/resource/30350f86c7d798177d83e00cadce54eb/xmlnote/11B15797EE064A9B9D041B2998A07E47/8760
[8838]: https://note.youdao.com/yws/public/resource/30350f86c7d798177d83e00cadce54eb/xmlnote/3BFB1F7EC1644E5BAEA6757EDFE5E286/8838