elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

目的：elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

项目经理要求表格头部添加一个图标，鼠标移入提示用户字段包含的内容信息，以前没有开发过，故总结一下。

添加方法：

方法一、

只是单纯的想在table中添加图标和tooltip(此方法无法使tooltip换行)

第一步: 在el-table-column中绑定:render-header=“renderPrice”

 <el-table-column label="宫缩" align="center" width="200">
</el-table-column>

第二步：

renderPrice(h, { column, $index }) {return [column.label,h('el-tooltip',{props: {content: '弱宫缩：宫缩持续20-30秒 中度宫缩：宫缩持续30-40秒强度宫缩：宫缩持续40秒以上'placement: 'top'  // 悬停内容展示的位置}},[h('span', { class: { 'el-icon-question': true }})] // 图标)]},

效果：

方法二、

使用组件插槽，elementui已封装好

<el-table-column align="center" label="缩力" width="150px"><template v-slot:header='scope'>     // 插槽插入header<span>缩力<el-tooltip:aa="scope"class="item"effect="dark"placement="top-start"><i class="el-icon-question"> </i><div style="width: 200px" slot="content">弱宫缩：宫缩持续20-30秒 <br />中度宫缩：宫缩持续30-40秒<br />强度宫缩：宫缩持续40秒以上</div></el-tooltip></span></template></el-table-column>

elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息相关推荐

elementui 表格插入图片并且鼠标移入放大
先来看下效果图如果需要移入图片放大则可使用el-popover悬浮效果 <el-table-columnalign="center"label="模板封面&quo ...
vue 移入显示_vue鼠标移入显示点赞图标，移出隐藏点赞图标，现在我想点击点赞图标，鼠标移出不会隐藏图标，怎么做？...
@mouseover="showLike(i)" @mouseleave="hideLike(i)"> @click="likePoint(i) ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
echarts-坐标轴名称过长省略，鼠标移入显示全部
坐标轴名称过长省略,鼠标移入显示全部一.效果图二.解决思路三.代码一.效果图二.解决思路创建一个div用于展示全称,鼠标悬浮坐标轴之上该div显示,反之隐藏第一步:为了让坐标轴响应和触发 ...
超出长度显示省略号，鼠标移入显示全部内容
超出长度显示省略号,鼠标移入显示全部内容 //这里用的是element组件,可以替换<el-popoverwidth="300"popper-class="wbs- ...
纯CSS实现鼠标移入显示图标效果
1.效果预览在淘宝或京东商城我们经常看到这样的效果:鼠标移动除某一个位置时出现下拉菜单,或者显示一个图标,那么这是如何实现的呢?我们今天就用CSS来实现鼠标移入时显示图标的一个效果. 下面是我们这次 ...
js + jquery 两栏Tab鼠标移入显示/隐藏的效果（详）
学习文献: 必须要掌握的原生JS实现JQuery 了解了这些才能开始发挥jQuery的威力 - 谦行 – JavaScript和jQuery两款TAB选项卡示例 -- 西门 jquery原创分享社区 ...
显示内容长时，显示部分内容，鼠标移入显示全部内容
实现思想: 在页面内放入一个Div, 调用lable的onMouseover,onMouseout 事件,然后用JS去实现显示部分内容在原有位置还是显示全部内容在Div中. 后台代码: str ...
html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...

elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

目的：elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

添加方法：

方法一、

方法二、

elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息相关推荐

最新文章

热门文章