1.场景效果

2.实现

  <el-table-column prop="pushContent" label="挂号短信内容" min-width="12%"><template slot-scope="scope"><el-popover trigger="hover" placement="top" :disabled="isShowPoppver(scope.row.pushContent)"><p style="max-width:600px;">{{ scope.row.pushContent }}</p><div slot="reference" class="name-wrapper">{{ scope.row.pushContent | ellipsis(30) }}</div></el-popover></template></el-table-column>
//vue scriptisShowPoppver(val,limit){if(val && val.length >= limit){return false}else{return true}},//表格数据过滤ellipsis(value, limit) {if (!value) return "/";else if (value.length > limit) {return value.slice(0, limit) + "...";} else {return value;}},},

根据自己的需求改下prop值应该就可以了

3.进阶版

 <el-table-column prop="relatedKnowNames" label="关联课程" min-width="20%"><template slot-scope="scope"><el-popover trigger="hover" placement="top" :disabled="isShowDieasePoppver(scope.row.relatedKnowNames)"><p style="max-width:600px;">{{ scope.row.relatedKnowNames | filterBr }}</p><div slot="reference" class="name-wrapper"><span v-html="showDiease(scope.row.relatedKnowNames)"></span></div></el-popover></template></el-table-column>
//js//查找字符串中某个字符在字符串中第几次出现的位置getIndexWhichTimesOfChar(str, cha, num) {let x = str.indexOf(cha);if (x == -1) return -1;for (let i = 0; i < num - 1; i++) {x = str.indexOf(cha, x + 1);if (x == -1) return -1;}return x;},showDiease(val) {if (!val) return '/'else {let index = this.getIndexWhichTimesOfChar(val, '>', 3)console.log(index)if (index == -1) {return val}else {return val.slice(0, index - 4) + "..."}}},//判断是否显示popoverisShowDieasePoppver(val) {if (!val) return true;if (val) {let index = this.getIndexWhichTimesOfChar(val, '>', 3)if (index == -1) {return true}else {return false}}},

elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover相关推荐

ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
element-ui table组件如何高度自适应、el-table的x、y轴都出现滚动条右下角会出现一个小白块解决方案
前言想要表格的高度自适应屏幕,保证table能一屏内展示完. elementUI的版本: "element-ui": "^2.14.1", 关键代码: < ...
vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开效果展示手风琴效果版本说明 "vue": "^2.6.11", " ...
html表格内容自动更新,ElementUI table 组件展开 expand，动态更新数据时，视图没有自动更新...
这是因为在给table的数据赋值时,展开的视图对应的字段不存在.(动态增加属性) 拿到table数据后,先把展开字段初始化,然后再赋值,问题就解决了~~ 比如,之前是:this.list = api. ...
vue+elementui Table组件splice删除表格总是删除最后一行
原因是没有给table下面的row加key,才导致的问题解决方法: 在 el-table 标签里加一个 row-key 属性 <el-table :data="tableData& ...
vue elementui table组件内容换行
如表格使用render-header内容过多使用"\n 或 <br/>"换行无效 render-header 列标题 Label 区域渲染使用的 Function w ...
element-ui table组件化，重新封装
1.话不多说先看效果主要实现功能:筛选:输入框.下拉框.时间:表格适用:多选.序号.排序.自定义.开关.链接可跳转.输入框.图片.自定义操作按钮(部分页面需要每行显示按钮不用所以大家按需添加).常规 ...
elementui Table组件单元格合并功能剖析
说在前面近期项目开发过程中用到了单元格合并的功能,在研究官网的介绍时其实不是很了解,好在给的有demo可以参考,如果需求是直接合并某一列,可能就不会有后面的故事了,恰好需求有点变化,如图所示:比如要 ...
elementUi——table组件修改表头和表身行样式——style的使用
今天在做后台管理系统时,遇到一个需求,就是根据表格中每行数据的状态,来渲染背景颜色. 如下图所示:满足一定条件时,背景颜色要改为绿色. row-style的使用 1.在el-table上添加row-s ...

elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover

elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover

1.场景效果

2.实现

3.进阶版

elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover相关推荐

最新文章

热门文章