Element-ui自定义表表头,修改列标题样式,添加提示,:render-header使用

  

render-header   

render-header在官方文档中的介绍是这样的:

  

                    参数   说明   类型   可选值   默认值               render-header   列标题标签区域渲染使用的功能   函数(h,{列,美元指数})   - - - - - -   - - - - - -            

  

  

<强> 1。在列标题后面加一个图标。

  

以element-ui官方文档一个表表格为例,我们在地址的后面加一个定位标志的图标,代码如下:

        & lt; template>   & lt; el-table   :数据=" https://www.yisu.com/zixun/tableData2 "      祝辞:row-class-name=" tableRowClassName”;   & lt; el-table-column   支持="日期"   label="日期”   宽度=" 180 "比;   & lt;/el-table-column>   & lt; el-table-column   支持="名称"   label="姓名”   宽度=" 180 "比;   & lt;/el-table-column>   & lt; el-table-column   支持="地址"   label="地址”:render-header=皉enderHeader”比;//加入渲染事件   & lt;/el-table-column>   & lt;/el-table>   & lt;/template>      & lt; style>   .el-table .warning-row {   背景:oldlace;   }      .el-table .success-row {   背景:# f0f9eb;   }   & lt;/style>      & lt; script>   出口默认{   方法:{   tableRowClassName({行,rowIndex}) {   如果(rowIndex===1) {   返回“warning-row”;   }else if (rowIndex===3) {   返回“success-row”;   }   返回”;   },//渲染事件   renderHeader (h,{列}){//h即为cerateElement的简写,具体可看vue官方文档   返回h (   “div”,   (   h(“跨越”,column.label),   h(“我”,{   类:“el-icon-location”,   风格:“颜色:# 409 eff; margin-left: 5 px;”   })   ),   );   }   },   数据(){   返回{   tableData2: [{   日期:2016-05-02,   名称:“王小虎”,   地址:“上海市普陀区金沙江路1518弄,   }, {   日期:2016-05-04,   名称:“王小虎”,   地址:“上海市普陀区金沙江路1518弄   }, {   日期:2016-05-01,   名称:“王小虎”,   地址:“上海市普陀区金沙江路1518弄,   }, {   日期:2016-05-03,   名称:“王小虎”,   地址:“上海市普陀区金沙江路1518弄   })   }   }   }   & lt;/script>      

效果如下:
  

  

 Element-ui自定义表表头,修改列标题样式,添加提示,:render-header使用“> </p>
  <p> <强> 2。在列标题后面添加一个单选框</强> </p>
  <p>还是以上面的代码为例,只写关键代码:</p>
  
  <pre类=   …//渲染事件   renderHeader (h,{列}){//h即为cerateElement的简写,具体可看vue官方文档   返回h (   “div”,   (   h(“跨越”,column.label),   h (el-checkbox, {   风格:“margin-left: 5 px”,   alt=" Element-ui自定义表表头,修改列标题样式,添加提示,:render-header使用“>

  

<强> 3。在表头添加一个工具提示

  

我们经常会遇到一些奇怪的需求,但是即使再奇怪我们也不能认输,现在有一个需求,要在列表表题后面添加一个提示,我们开始尝试着做:

  

还是以上面的代码为例,刚开始我想直接用“el-tooltip”,应该不是很难,然后就是这样:

        …   renderHeader (h,{列}){   返回h (   “div”,   (   h(“跨越”,column.label),   h (' el-tooltip ',   h(“我”,{   类:“el-icon-question”,   风格:“颜色:# 409 eff; margin-left: 5 px;”   })   ),{   内容:“这是一个提示”   })   ]   );   }   …      

运行后发现,基本样式出来了,但是提示没有

  

 Element-ui自定义表表头,修改列标题样式,添加提示,:render-header使用“> </p>
  <p>根据element-ui关于工具提示的文档,我发现不管是效果,内容还是位置对提示都不管用,既然硬上不管用,就曲线救国,通过组件的方法,先造个轮子再走路</p>
  
  <pre类=//写一个PromptMessage的组件,并全局注册   & lt; template>   & lt; div类="提示"比;   & lt; el-tooltip效果=昂诎怠?罢贰钡奈恢迷?   & lt; div槽=澳谌荨痹?/插槽,可提供多行的提示信息   & lt; p v=跋钅啃畔ⅰ?关键=拔锲贰北?   {{项}}   & lt;/p>   & lt;/div>   & lt;我类=" el-icon-question "祝辞& lt;/i>   & lt;/el-tooltip>   & lt;/div>   & lt;/template>      & lt; script>   出口默认{   道具(“信息”):   };   & lt;/script>

Element-ui自定义表表头,修改列标题样式,添加提示,:render-header使用