摘要：难道是因为这个组件自带标签胡乱猜疑是解决不了问题的。为何称之为勉强版，因为从上面的也看出来了。再看数组第二个值，这便是一个完整的示例了。也希望能更加努力的学习和进步，更深的理解前端这门艺术
项目使用ElementUI，挺好用的，页面中有些地方的帮助提示通过使用组件Tooltip和el-icon-question来展示，代码如下：
本月累计收益
截图如下：
另外也可以看看jsfiddle的demo
全站很多地方都有都需要这样的帮助提示，其中有些需要在表格的表头上添加，似乎有点难度。效果如下：
因为ElementUI上面的文档对这块自定义表头没有什么参考的文档，是否能够实现心里没底，去仔细翻了文档，发现有个renderHeader的函数可以实现，一直以为Vue还算比较熟悉的我有点点懵，这是个啥？？？
renderHeader（函数渲染）在我不太多的Vue项目开发实践中，很少用到，因此并不熟悉，先看看官方解释：
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。
ElementUI中的renderHeader就是对列标题Label区域渲染使用的Function，通过他实现自定义表头label功能！
万变不离其宗，这个ElementUI的解释一看就像是这段官方示例：
// 官方示例部分
render: function (createElement) {
return createElement("h1", this.blogTitle)
}
而回头再看看ElementUI的示例：Function(h, { column, $index })。耐心琢磨，结合createElement看看便粗略写出来了一个勉强能用的：
renderHeader(h, { column, $index }) {
return h(
"el-tooltip",
{
props: {
content: (function() {
let label = column.label
switch (label) {
case "访问数":
return "网站页面上独立访问应用的人数（UV）"
break
case "提交数":
return "网站页面上访客在应用上完成提交的数量"
break
case "成交数":
return "网站页面上最终成功在应用上完成提交的数量"
break
}
})(),
placement: "top"
},
domProps: {
innerHTML: column.label + ""
}
},
[h("span")]
)
},
// ...
但是很奇怪的是，最后面我要加上这个[h("span")]才行（demo）。
这种写法我还是参考element table 自定义表头，但是假设我写成[h("span", "test")]是无法展现出test的效果的（demo）。根据vue文档中解释的第三个参数，这里最为一个数组，为何span成了el-tooltip的HTML标签，我还是不解。
之所以奇怪是因为假设我将引入的组件换成el-button，见如下代码：
renderHeader(h, { column, $index }) {
return h(
"el-button",
{
props: {
content: (function() {
let label = column.label
})()
},
domProps: {
innerHTML: column.label + ""
}
}
)
},
// ...
则不需要尾部那个[h("span")]。却能呈现出button结合icon的正确效果（demo）。难道是因为这个组件自带HTML标签？胡乱猜疑是解决不了问题的。几番尝试，还是没能达到预期交互效果。不过进度问题，暂时只能使用这个勉强版本。
为何称之为勉强版，因为从上面的demo也看出来了。这个提示交互和我文章之前写的交互是有区别的，正确交互是：光标移入问号的图标上才会展示提示框，虽然目前勉强版影响不大，却一直在心中如一个疙瘩。于是过了一周，决定抽空把这个问题处理好，就有了新的写法。
勉强版虽然没有大碍，但是心中略有不爽。几日后专门抽点时间多次阅读各种实例，仔细阅读文档，反复尝试各种写法。终于写出了一个相对良好的版本，直接先上代码：
renderHeader(h, { column, $index }) {
return [
column.label,
h(
"el-tooltip",
{
props: {
content: (function() {
let label = column.label
switch (label) {
case "访问数":
return "网站页面上独立访问应用的人数（UV）"
break
case "提交数":
return "网站页面上访客在应用上完成提交的数量"
break
case "成交数":
return "网站页面上最终成功在应用上完成提交的数量"
break
}
})(),
placement: "top"
}
},
[
h("span", {
class: {
"el-icon-question": true
}
})
]
)
]
}
这个写法很特别，return的是一个数组，这个写法我又是哪里看到的呢？来自elementUI的table组件的表头自定义：想把单位换行，有什么解决方法吗？的采纳回复中。乍一看有点乱七八糟，不过仔细想想，之前的提示在整个表头都触发了，现在这个数组大概起到了拼接作用，也就是将不需要出发的textNode部分提了出来。再看数组第二个值，这便是一个完整的示例了。最终效果可见demo。
其实心中还是有个疑问，为什么这里h(param1, param2, param3)的第三个参数用数组，数组中的第一个又是一个h()，并且这个对应的就是组件el-tooltip的HTML标签，没有它就无法正常渲染该组件。
写到这里，其实问题已经解决了，虽然符合需求的完美版本已经上线，但是感觉个人对Vue或者说是Javascript更深层面的理解能力还不够，也就对各种现象没办法做出很好的解释。也希望能更加努力的学习和进步，更深的理解前端这门艺术：）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97679.html
摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...
摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...
摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...
摘要：本文章从如下图所示的最基本的入手，分析组件源代码。本人已经对组件原来的源码进行削减，源码点击这里下载。还有两个重要的函数与。在组件的阶段会调用更新，从而触发重新渲染。例如当组件加载后发送请求，待请求响应赋值，重新渲染。 本文章从如下图所示的最基本的table入手，分析table组件源代码。本人已经对table组件原来的源码进行削减，源码点击这里下载。本文只对重要的代码片段进行讲解，推荐...
摘要：项目地址前言结合日常开发，封装常用功能，提高开发效率。通用显示效果支持类型类型文本链接文档图片用法相关属性属性参数说明类型可选值默认值动画效果的列的配置对象，更多细节请参见列属性。 项目地址：tbs-ve-template 前言 结合日常开发，封装常用功能，提高开发效率。让程序猿兄弟姐妹们也有时间约约女票，逗逗男票，做做自己想做的事情，不要天天在办公室造轮子！ 1.通用Table 思路...
阅读 1446·2021-09-28 09:43
阅读 929·2021-09-23 11:22
阅读 2181·2021-09-14 18:05
阅读 1709·2019-08-30 15:52
阅读 2591·2019-08-30 10:55
阅读 1881·2019-08-29 16:58
阅读 1166·2019-08-29 16:37
阅读 2902·2019-08-29 16:25
