位置: 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 登录模板)

  • 去年所得税汇算清缴补所得税
  • 印花税都有啥
  • 出口货物备案单证目录在哪里
  • 人工费已经支付怎么入账
  • 发票同步功能在哪里
  • 过路费按照什么缴纳增值税
  • 连锁店每个店都要独立核算吗
  • 企业微信里的钱
  • 向关联企业捐赠现金500万元,假定按照税法规定
  • 流动负债是总负债吗
  • 出售生产线计入哪里
  • 商场返现活动怎么入账
  • 材料税款抵扣
  • 现金折扣 会计处理
  • 小规模和一般纳税人的区别
  • 企业拆迁补偿款需要开发票吗
  • 去国税申请开票需要法人和财务去吗?
  • 医院企业所得税免税吗
  • 怎么通过合并弥补亏损,使得利益最大化?
  • 一般纳税人转小规模怎么办理
  • 分配利润账务处理
  • 进口应付款融资
  • 工程和技术研究和试验发展
  • 员工报销现在用什么软件
  • 实际成本法的会计分录怎么写
  • win10设置系统启动
  • linux服务器常用操作命令
  • 购买的房屋如何过户
  • 如何把文件夹加密码锁手机
  • PHP Warning:PHP Startup: in Unknown on line 0解决办法
  • 一次性补偿金在取得后间隔一个月申报可以吗
  • adb命令linux命令的区别
  • kb4586819更新
  • 慈善捐赠金额排行
  • 电商快递费怎么算
  • 增值税专用发票查询系统官方网站
  • 当月认证抵扣的进项税发票一定要入帐做成本吗?
  • mgaqdesk.exe进程有什么作用 mgaqdesk进程查询
  • 受赠与获赠的区别
  • 承接旅游业务
  • php基本框架
  • 可视化思考
  • php标准数据类型共有四种
  • 代发工资如何计算
  • 定额发票和增值税发票
  • 事业单位收入入账
  • 关于帝国战争的游戏
  • 织梦标签工具
  • mysql存储过程cursor
  • 预计可变现净值与账面成本的关系
  • 非营利组织增值税怎么处理
  • 营业外支出的会计要素
  • 咨询服务业主营业务成本
  • 小规模纳税人劳务派遣可以差额征税吗
  • 未担保余值举例
  • 溢价交易和折价交易
  • 经营一家淘宝店需要多少钱
  • 新建厂房需要缴纳什么税
  • 主营业务成本如何做分录
  • 福利设施的定义
  • sql server2012操作步骤
  • sql多条件组合查询
  • linux自动清理内存软件
  • xp的命令提示符在哪
  • rhel配置网卡文件和图形界面
  • 关于windows的开始菜单,叙述错误的是
  • 删除账户win10
  • jquery prompt
  • scrapy爬虫教程
  • python列表讲解
  • Unity3D游戏开发标准教程
  • unity设置update间隔
  • android实现简单的计算机界面
  • 主机端口扫描程序设计python
  • jquery插件开发方法
  • 开发笔记本哪个比较好一点
  • 砂石需要缴纳资源税吗
  • 重新税务登记程序有哪些
  • 四川医保网上怎么缴费支付宝
  • 出口退税 即征即退属于政府补助吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设