微客导航 » 文章资讯 » VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

2023-09-05 03:08:05 441

ElementUI2.0的表格的扩展：

elementUI表格table

elementUI文字提示Tooltip

如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？

注：index==0时是一个排序功能的按钮

在使用：render-header之前，首先要npmibabel-helper-vue-jsx-merge-propsbabel-plugin-syntax-jsxbabel-plugin-transform-vue-jsx--s 安装一个解析包，然后在babelrc里配置"plugins":["transform-runtime","transform-vue-jsx"]

renderHeader(h,{column}){
if(column.label.length>13){
return(

{column.label}

)
}else{
return(
{column.label}
)
}
},

并不想让所有的表头都弹出tooltip，只想让超出长度并且

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

隐藏起来的内容在鼠标悬浮时有飘窗，暂时没有更好的办法，采取的办法是检测表头内容的长度，不过这种方式并不能标准的判断哪一个表头需要飘窗。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

热门推荐

随机推荐