ElementUI2.0的表格的扩展:
如果要实现鼠标移到表头有注释或者弹框该怎么添加呢?
<el-table
empty-text=\"正在加载中...\"
:data=\"contentList\"
style=\"width: 100%\"
@sort-change=\"sort\"
class=\"pro-table-item\"
tooltip-effect=\"dark\"
>
<template v-for=\"(item,index) in List\">
<el-table-column
v-if=\"index == \'0\'\"
:prop=\"index.toString()\"
:label=\"item\"
sortable=\"custom\"
min-width=\"120\"
:render-header=\"renderHeader\"
>
</el-table-column>
<el-table-column
v-else
:prop=\"index.toString()\"
:label=\"item\"
min-width=\"120\"
:render-header=\"renderHeader\"
show-overflow-tooltip
</el-table-column>
</template>
</el-table>
注: index == 0 时是一个排序功能的按钮
在使用:render-header之前,首先要 npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --s 安装一个解析包,然后在babelrc里配置\"plugins\": [\"transform-runtime\", \"transform-vue-jsx\"]
renderHeader(h, { column }) {
if(column.label.length>13) {
return (
<el-tooltip
class=\"item\"
effect=\"dark\"
content={column.label}
placement=\"top\"
>
<span>{column.label}</span>
</el-tooltip>
)
} else {
return (
<span>{column.label}</span>
)
}
},
并不想让所有的表头都弹出tooltip,只想让超出长度并且
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
隐藏起来的内容在鼠标悬浮时有飘窗,暂时没有更好的办法,采取的办法是检测表头内容的长度,不过这种方式并不能标准的判断哪一个表头需要飘窗。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
IBM宣布:成功研制出了量子计算机原型机
下一篇 :
Gartner为何瞧不上微软和谷歌的IaaS?
-
Alluxio使用——TensorFlow篇
2026-05-19栏目: 教程
-
降云十八掌——阿里云运维架构最佳实践(上)
2026-05-19栏目: 教程
-
降云十八掌——阿里云运维架构最佳实践(下)
2026-05-19栏目: 教程
-
RPA:企业信息孤岛的“克星”
2026-05-19栏目: 教程
-
我家的小猫咪
2026-05-19栏目: 教程
