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

  • 小规模不动产租赁税率5%
  • 税务师财务与会计难不难
  • 计提环境保护税怎么计算
  • 补缴以前年度房产税以及滞纳金
  • 套期会计新旧准则对比
  • 基本户借款 一般户可以还吗
  • 发票章盖金额上去了
  • 银行取钱需要签协议吗
  • 飞机票的快递费多少钱
  • 金税盘开完票后怎么报税一下
  • 房地产开发企业预收款预缴增值税
  • 个税个人减免
  • 公司属于亏损状态,但是法人个人收入算公司账吗
  • 注册个人独资企业和有限公司哪个好
  • 企业挂靠税收市收取的标准是什么
  • 税局如何查无票收入
  • 关税完税价格包含关税吗
  • 个人装卸费如何开票
  • 机动车销售统一票据可以抵扣吗
  • 应交增值税出口退税科目怎么结平
  • 预付账款可以用应付账款借方
  • 资产负债表中其他流动资产怎么计算
  • 分公司可以列为被告吗
  • 节能控制模块
  • 年末利润分配会计处理
  • 小型微利企业的条件
  • 实际成本法的会计分录怎么写
  • 收到工会经费返还属于现金流量表哪
  • 在建工程人工费会计分录
  • 贷款本息转本金
  • 硬件设施不完备
  • 宏基笔记本一键恢复系统
  • 印花税会计分录2023
  • 前端数据统计图
  • 煤炭贸易公司账务大全
  • 增值税发票超额后税率
  • 哪些支出可以计入成本科目
  • 固定资产有何特征?
  • 员工食堂买菜
  • 帝国cms使用手册
  • 小规模纳税人的增值税计入成本吗
  • 收到政府补贴的账务处理
  • SQL中print、sp_helptext的限制与扩展
  • 银行承兑到期怎么入账
  • 小规模增值税减按1%的政策
  • 金税盘怎么向分盘分配发票
  • 新公司成立后税务方面有哪些流程2023
  • 土地摊销计入成本还是费用
  • 债券收益可以表现为三种形式
  • 物业 收电费
  • 申请财产损失会计分录
  • 小规模纳税人购进商品会计分录
  • 低值易耗品费用记在什么费用
  • 外购商品用于促销能抵扣吗
  • 应交税费的记账分录
  • 工会经费计提比例0.8%
  • 房屋装修支出怎么做账
  • 销售预算的重要性
  • mac硬盘挂载软件
  • centos6可用yum源
  • 虚拟机命令cd
  • win10开机显示recover
  • linux的ssr
  • AsyncTask onPostExecute()不执行,与JPush冲突
  • python 500行
  • python win32print
  • 浅析学校德育的个体智能发展功能
  • jQuery实现的AJAX简单弹出层效果代码
  • 用批处理删除注册表项
  • 预处理命令可以放在程序中的任何位置
  • 详细的测试用例
  • python win
  • 浅谈 vue 中的 watcher
  • js中slice方法的作用
  • 黑马程序员培训怎样
  • 电子专票操作视频
  • 北京朝阳地税局电话号码
  • 园区地税局在哪里
  • 中国进口奶粉关税税率表2019
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设