element ui表格内容过长省略显示，点击单元格展开全部内容_elementui 表格缩略显示-程序员宅基地

技术标签： html5 elementui 前端 vue.js javascript element

element ui表格内容过长省略显示

老板有个需求是希望能够对数据集的内容进行一个展示，当然这种功能用表格轻轻松松就解决啦，但是问题在于数据集中一条数据的内容通常都比较长，这就导致表格的一行特别的高，十分不好看，所以希望能够将表格的内容用省略号显示，当点击当前单元格时候再显示完整的表格内容。

实现上述需求有以下几种思路：1.利用element ui提供的:show-overflow-tooltip="true"属性来折叠，利用tooltip来进行内容的完整展示；2.利用:formatter="stateFormat"来确定显示多少字符。

show-overflow-tooltip

Element-ui提供了Table-column Attributes的show-overflow-tooltip属性，使用时只需要在需要设置的列中添加该属性即可。

显示效果如下：

但是这也太丑了吧？？？哪有这样一大坨直接tooltip显示的啊？若要修改tooltip的样式可以参考 element ui 中table 单列超出部分显示省略号，这明显不符合我的要求，我希望的是表格内容过长用省略号显示，但是通过点击表格能够实现内容的展开和重新的省略。

formatter

Element-ui同时还提供了Table-column Attributes的formatterp属性，它也能够帮助我们隐藏过长的表格内容

比如我的代码是：

<el-table-column prop="content" label="数据内容" align="center" :formatter="stateFormat"></el-table-column>

stateFormat(row, column, cellValue){
    
  // console.log(row);
  // console.log(column);
  // console.log(cellValue);
  if(row.flag){
    
    if (!cellValue) return '';
    if (cellValue.length > this.contentLength) {
       // 超过contentLength长度的内容隐藏
      return cellValue.slice(0, this.contentLength) + '...';
    }
    return cellValue;
  }else{
    
    return cellValue;
  }
},

效果如下：

现在考虑的就是如何通过点击展开内容，这时候我注意到了一个方法 cell-click，官方描述的是 当某个单元格被点击时会触发，那么当我们点击数据内容的某个单元格的时候让内容全部展示出来是不是就可以了呢？

clickContent(row, column, cell, event){
    
  clickContent(row, column, cell, event){
    
    if(column.label === "数据内容"){
      // 只有点击数据内容列时才会展开
      row.flag = !row.flag;  // 这个参数是当时将数据存储到表格中时特意加上控制表格的展开和省略的
    }
  }
}

然后效果就实现啦~

本文链接：https://blog.csdn.net/qq_39526294/article/details/120525203

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

FTP命令字和返回码_ftp 登录返回230-程序员宅基地

文章浏览阅读3.5k次，点赞2次，收藏13次。为了从FTP服务器下载文件，需要要实现一个简单的FTP客户端。FTP（文件传输协议）是 TCP/IP 协议组中的应用层协议。FTP协议使用字符串格式命令字，每条命令都是一行字符串，以“\r\n”结尾。客户端发送格式是：命令+空格+参数+"\r\n"的格式服务器返回格式是以：状态码+空格+提示字符串+"\r\n"的格式，代码只要解析状态码就可以了。读写文件需要登陆服务器，特殊用..._ftp 登录返回230

centos7安装rabbitmq3.6.5_centos7 安装rabbitmq3.6.5-程序员宅基地

文章浏览阅读648次。前提：systemctl stop firewalld 关闭防火墙关闭selinux查看getenforce临时关闭setenforce 0永久关闭sed-i'/SELINUX/s/enforcing/disabled/'/etc/selinux/configselinux的三种模式enforcing：强制模式，SELinux 运作中，且已经正确的开始限制..._centos7 安装rabbitmq3.6.5

idea导入android工程,idea怎样导入Android studio 项目？-程序员宅基地

文章浏览阅读5.8k次。满意答案s55f2avsx2017.09.05采纳率：46%等级：12已帮助：5646人新版Android Studio/IntelliJ IDEA可以直接导入eclipse项目,不再推荐使用eclipse导出gradle的方式2启动Android Studio/IntelliJ IDEA，选择 import project3选择eclipse 项目4选择 create project f..._android studio 项目导入idea 看不懂安卓项目

浅谈AI大模型技术：概念、发展和应用_ai大模型应用开发-程序员宅基地

文章浏览阅读860次，点赞2次，收藏6次。AI大模型技术已经在自然语言处理、计算机视觉、多模态交互等领域取得了显著的进展和成果，同时也引发了一系列新的挑战和问题，如数据质量、计算效率、知识可解释性、安全可靠性等。城市运维涉及到多个方面，如交通管理、环境监测、公共安全、社会治理等，它们需要处理和分析大量的多模态数据，如图像、视频、语音、文本等，并根据不同的场景和需求，提供合适的决策和响应。知识搜索有多种形式，如语义搜索、对话搜索、图像搜索、视频搜索等，它们可以根据用户的输入和意图，从海量的数据源中检索出最相关的信息，并以友好的方式呈现给用户。_ai大模型应用开发

非常详细的阻抗测试基础知识_阻抗实部和虚部-程序员宅基地

文章浏览阅读8.2k次，点赞12次，收藏121次。为什么要测量阻抗呢？阻抗能代表什么？阻抗测量的注意事项... ...很多人可能会带着一系列的问题来阅读本文。不管是数字电路工程师还是射频工程师，都在关注各类器件的阻抗，本文非常值得一读。全文13000多字，认真读完大概需要2小时。一、阻抗测试基本概念阻抗定义：阻抗是元器件或电路对周期的交流信号的总的反作用。AC 交流测试信号 (幅度和频率)。包括实部和虚部。图1 阻抗的定义阻抗是评测电路、元件以及制作元件材料的重要参数。那么什么是阻抗呢？让我们先来看一下阻抗的定义。首先阻抗是一个矢量。通常，阻抗是_阻抗实部和虚部

小学生python游戏编程arcade----基本知识1_arcade语言 like-程序员宅基地

文章浏览阅读955次。前面章节分享试用了pyzero,pygame但随着想增加更丰富的游戏内容，好多还要进行自己编写类，从今天开始解绍一个新的python游戏库arcade模块。通过此次的《连连看》游戏实现，让我对swing的相关知识有了进一步的了解，对java这门语言也有了比以前更深刻的认识。java的一些基本语法，比如数据类型、运算符、程序流程控制和数组等，理解更加透彻。java最核心的核心就是面向对象思想，对于这一个概念，终于悟到了一些。_arcade语言 like

随便推点

【增强版短视频去水印源码】去水印微信小程序+去水印软件源码_去水印机要增强版-程序员宅基地

文章浏览阅读1.1k次。源码简介与安装说明：2021增强版短视频去水印源码去水印微信小程序源码网站去水印软件源码安装环境（需要材料）：备案域名–服务器安装宝塔-安装 Nginx 或者 Apachephp5.6 以上-安装 sg11 插件小程序已自带解析接口，支持全网主流短视频平台，搭建好了就能用注：接口是公益的，那么多人用解析慢是肯定的，前段和后端源码已经打包，上传服务器之后在配置文件修改数据库密码。然后输入自己的域名，进入后台，创建小程序，输入自己的小程序配置即可安装说明：上传源码，修改data/_去水印机要增强版