位置: IT常识 - 正文

Vue:element-ui中表格过长内容隐藏显示

编辑:rootadmin
Vue:element-ui中表格过长内容隐藏显示 一、el-table表格

推荐整理分享Vue:element-ui中表格过长内容隐藏显示,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

        在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示:

         上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看。

        为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且在鼠标悬停在内容上面时,会以悬浮框的形式将所有数据显示出来,代码如下所示:

<el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column>Vue:element-ui中表格过长内容隐藏显示

效果如下图所示:

         从上图效果中,可以看出,框出的内容在显示时将其过长的部分以省略号...代替,而当鼠标放置到内容上面时,包括隐藏数据的所有数据以悬浮框的形式显示出来。

        这种方法即达到了使页面美观,也达到了数据显示的的目的,可以在前端使用表格显示数据的时候采用。

        但是,这种方法有一个很大的弊端,即鼠标悬停显示的数据无法复制。为了解决这个问题,可以在表格中采用Popover 弹出框组件。

二、Popover 弹出框

        element-ui中,表格使用Popover 弹出框组件代码如下:

<!-- <el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column> --><el-table-column label="deviceId" prop="deviceId"><template slot-scope='scope'><el-popoverplacement="top-start"width="400"trigger="hover"><span>{{scope.row.deviceId}}</span><span slot="reference">{{scope.row.deviceId.substr(1,20) + '...'}}</span></el-popover></template></el-table-column>

        最终效果如下所示:

         从上图可以看出,使用Popover 弹出框组件,我们不仅在鼠标指向内容时,在悬浮框中将所有内容显示出来,鼠标还可以一如到悬浮框,复制自己想要的内容。

本文链接地址:https://www.jiuchutong.com/zhishi/292307.html 转载请保留说明!

上一篇:南邦国家公园的尖峰石阵,西澳大利亚州 (© Frank Krahmer/Getty Images Plus)(鬓角头发剃光了多久能长好)

下一篇:Vue项目二 登录注册功能的实现(vue 登录模板)

  • 进项税加计抵扣政策
  • 公立幼儿园保育员好进吗
  • 收到财政局拨款填到现金流量表哪一项
  • 公司账户转到对方账户
  • 劳务费属于印花税范围吗
  • 纳税人采取预收的措施
  • 资产负债表存货为负数原因
  • 注销了出口退税怎么办
  • 境外付款境内支付什么意思
  • 没有票据怎么要账
  • 差旅费报销怎么做账
  • 应收账款计提坏账准备是谨慎性原则吗
  • 企业取暖费怎么做会计分录
  • 员工罚款如何入账
  • 上月工资多计提了怎么调整
  • 打印机需要计提折旧吗
  • 虚开进项税额转出会计分录
  • 物业费属于什么合同
  • 小规模购买农产品
  • 节能减排奖励资金追回
  • 企业的不征税收入用于支出所形成的资产
  • 进口报关单是什么样子的
  • 存货盘亏损失
  • 企业利息收入如何做分录
  • 遗属补助是死亡当月发放还是次月发放
  • 发给职工的交通补贴
  • 活动展开方式怎么写
  • 社保公积金外包对员工的利弊
  • 英雄联盟电脑软件图片
  • word要打印保存在哪个类型
  • bios怎么关
  • SCHDPL32.EXE - SCHDPL32是什么进程 有什么用
  • PHP:php_strip_whitespace()的用法_misc函数
  • 发财树的养殖方法和浇水时间
  • PHP:imagecolormatch()的用法_GD库图像处理函数
  • laravel视频教程
  • php静态属性和静态方法
  • 小规模纳税人的企业所得税怎么算
  • php数组变字符串
  • thinkphp6框架源码完整版下载
  • js不同类型的工厂函数
  • 母子公司之间的租赁房屋
  • phpcms默认密码
  • vscode yaml插件
  • 销售折扣现金流量表
  • 资产负债表中所有者权益合计怎么算
  • 销售清单需要盖什么章子
  • 银行承兑汇票和贴现的区别
  • 使用银行汇票的结算方式
  • 个人承担的个税是公司的成本费用吗
  • 代开增值税额与实际缴款额差一分钱如何入账?
  • 承兑汇票到期取现手续费
  • 无形资产未取得发票
  • 租赁公司账务科目
  • 行政事业单位的营业执照叫什么
  • 福利费属于管理费用还是销售费用
  • 股票增发给谁
  • sql联合主键设置外键
  • mysql存储过程视频教程
  • mysql5.7.29安装
  • fedora vlc
  • mac 应用
  • flashhelperservice.exe是什么程序
  • linux批量杀进程 awk
  • win7 64位系统怎么查看串口号?
  • win7如何整理磁盘
  • win10系统如何打开
  • win8怎么打开磁盘管理
  • math和maths哪个对
  • nodejs基本原理
  • 笔记本等待网络准备好
  • html中滚动条
  • 学习计划表模板
  • 一行代码5个bug
  • android.net.wifi
  • javascript教程 csdn
  • 横向对比分析两个人关系的意义
  • 贵州省 税务局
  • 粮食企业所得税优惠
  • 税收通知
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设