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>
效果如下:
…//渲染事件 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;” }) ),{ 内容:“这是一个提示” }) ] ); } …
运行后发现,基本样式出来了,但是提示没有
//写一个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>