实现文本 内容展开 / 收起

news2024/11/26 16:32:51

请添加图片描述

<template>
  <el-table :data="tableData" style="width: 100%" height="250">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column prop="message" label="描述" width="120" >
	    <template slot-scope="scope">
			<div>
			  <span :key="scope.row.isExpand+row.$index" class="multi-line" :style="{'-webkit-line-clamp': scope.row.isExpand}">
			    {{ scope.row.message }}
			  </span>
			  <el-button
			    v-if="scope.row.message.length>500"
			    type="text"
			    size="mini"
			    :icon="scope.row.icon"
			    @click="expand(scope.row)"
			  >{{ scope.row.isExpandContent }}</el-button>
			</div>
		</template>
	</el-table-column>
  </el-table>
</template>

<script>
export default {
  
   data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          isExpandContent: '展开',
          isExpand: 5,
          message: '超多文本超多文本超多文本',
        }, {
          date: '2016-05-02',
          name: '王小虎',
          isExpandContent: '展开',
          isExpand: 5,
          message: '超多文本超多文本超多文本',
        }]
      }
    },
  methods: {
  	expand (row) {
        if (row.isExpandContent === '展开'){
            this.$set(row,'isExpandContent','收起')
            this.$set(row,'isExpand','')
            this.$set(row,'icon','icon-arrow-up')
        } else {
            this.$set(row,'isExpandContent','展开')
            this.$set(row,'isExpand',5)
            this.$set(row,'icon','icon-arrow-right')
        }
    },
  }
}
</script>
<style lang="scss" scoped>
.multi-line{
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

可根据代码升级优化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1354498.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

geemap学习笔记040:GEE中样本点选择操作流程

前言 geemap中目前有一个bug&#xff0c;就是在选择样本点的时候不合理&#xff0c;选完一类样本之后&#xff0c;没法继续选择下一类&#xff0c;并且没法在线进行编辑和修改。因此目前就只能结合在线版的GEE进行样本选择&#xff0c;本节就详细的介绍一下GEE中样本点的选择过…

HCIA-Datacom题库(自己整理分类的)——其他网络协议【完】

&#xff08;一&#xff09;单选 下列属于链路状态协议的是? Direct static FTP OSPF 解析&#xff1a; FTP&#xff1a;文件传输协议 OSPF&#xff1a;链路状态路由协议 如下图所示的网络主机A通过Telnet登录到路由器A然后在远程的界面通过FTP获取路由器的配置文件&…

multipath 内核接口及框架介绍

文章目录 1 云主机使用网络存储 io 流程2 multipath 介绍 1 云主机使用网络存储 io 流程 对于一个云服务环境&#xff0c;大致会有网络节点&#xff0c;存储节点&#xff0c;计算节点&#xff0c;控制节点&#xff0c;其中虚拟云主机在计算节点工作&#xff0c;而虚拟云主机&a…

数据结构——二叉树四种遍历的实现

目录 一、树的概念 1、树的定义 1&#xff09;树 2&#xff09;空树 3&#xff09;子树 2、结点的定义 1&#xff09;根结点 2&#xff09;叶子结点 3&#xff09;内部结点 3、结点间关系 1&#xff09;孩子结点 2&#xff09;父结点 3&#xff09;兄弟结点 4、树…

人工智能在金融领域的应用存在的4大挑战

金融服务供应商应该有计划地应对AI面临的难题 金融行业投资人工智能热潮带来有关数据安全和透明度的新问题。由于数据管理实践随着新的 AI 解决方案的引入而不断发展&#xff0c;应对这些新问题以及金融服务领域 AI 面临的其他挑战尤为重要。各组织必须认识到可能面临以下挑战…

网络安全—IPSec安全策略

文章目录 网络拓扑添加策略ESP添加筛选器添加筛选器的操作另一台主机设置 AH 使用Windows Server 2003系统 网络拓扑 client1 IP 192.168.17.105client2 IP 192.168.17.106 只要保证两个主机在同一网段接口&#xff0c;即互相ping通即可完成策略的实现 下面的所有通讯都只是…

Vue 模板编译原理解析

Vue 模板编译原理解析 模板编译整体流程 首先我们看一下什么是编译&#xff1f; 所谓编译&#xff08;Compile&#xff09;&#xff0c;指的是将语言 A 翻译成语言 B&#xff0c;语言 A 就被称之为源码&#xff08;source code&#xff09;&#xff0c;语言 B 就被称之为目标…

半导体设备系列:半导体制造产能扩张,设备零部件需求旺盛

近年来国内半导体制造产能不断扩张&#xff0c;半导体设备厂商加速成长。我们认为下游发展将拉动上游本地化配套需求&#xff0c;半导体设备零部件迎来高增长阶段。 摘要 半导体设备零部件包含密封圈、EFEM、射频电源、静电吸盘、硅电极、真空泵、气体流量计、喷淋头等产品&a…

实时数据处理概述与Spark Streaming简介

实时数据处理已经成为当今大数据时代的一个重要领域&#xff0c;它使组织能够及时分析和采取行动&#xff0c;以应对不断变化的数据。Spark Streaming是Apache Spark生态系统中的一个模块&#xff0c;专门用于实时数据处理。本文将深入探讨实时数据处理的概念&#xff0c;并介绍…

leetcode贪心(单调递增的数字、监控二叉树)

738.单调递增的数字 给定一个非负整数 N&#xff0c;找出小于或等于 N 的最大的整数&#xff0c;同时这个整数需要满足其各个位数上的数字是单调递增。 &#xff08;当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。&#xff…

一文教会git如何配置多SSH Key(Github+Gitlab)

一文教会git如何配置多SSH Key&#xff08;GithubGitlab&#xff09; 对于工作了的伙伴来说&#xff0c;大家经常会配置多个SSH Key&#xff1a; SSH拉取的仓库不会反复的要求输入github用户名密码来验证自己的身份需要将公司的Gitlab和个人的Github区分开 我这里以Mac电脑为例…

次梯度算法介绍

系列文章目录 最优化笔记&#xff0c;主要参考资料为《最优化&#xff1a;建模、算法与理论》 文章目录 系列文章目录一、次梯度1 定义2 存在性 二、次梯度的计算1 按定义计算2 常用计算规则 三、最优性条件1 无约束优化问题2 约束优化问题 四、次梯度算法1 迭代格式2 收敛性 参…

sql关键字——with 子查询,row_number()排名函数,lag()函数用法举例

题目&#xff1a; 查询所有选修"英语"的学生成绩与前一名的分数差距&#xff0c;按照成绩降序排序。 针对以上需求&#xff0c;有两种做法 1.使用lag函数 lag()函数&#xff0c;取当前行的上一列&#xff0c;用法是lag(列&#xff0c;往上取的行数&#xff0c;填充…

使用Python做个可视化的“剪刀石头布”小游戏

目录 一、引言 二、环境准备与基础知识 三、游戏界面制作 四、游戏逻辑实现 五、代码示例 六、游戏测试与优化 七、扩展与改进 八、总结 一、引言 “剪刀石头布”是一种古老的手势游戏&#xff0c;它简单易懂&#xff0c;趣味性强&#xff0c;适合各个年龄段的人参与。…

Excel·VBA二维数组组合函数的应用实例之概率计算

看到一个视频《李永乐老师的抖音 - 骰子概率问题》&#xff0c;计算投出6个骰子恰好出现1、2、3、4、5、6这6个点数的概率 李永乐老师的计算方法是&#xff0c;第1个概率为1即6/6&#xff0c;第2个不与之前相同的概率为5/6&#xff0c;第3个同理概率为4/6&#xff0c;因此该问…

深度学习:大规模模型分布式训练框架DeepSpeed

深度学习&#xff1a;大规模模型分布式训练框架DeepSpeed DeepSpeed简介DeepSpeed核心特点DeepSpeed如何工作&#xff1f;DeepSpeed如何使用&#xff1f;参考文献 DeepSpeed简介 随着机器学习模型变得越来越复杂和庞大&#xff0c;训练这些模型所需的计算资源也在不断增加。特别…

【已解决】Invalid bound statement (not found)

报错讯息 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.casey.mapper.SysRoleMapper.getUserRoleCode at org.apache.ibatis.binding.MapperMethod S q l C o m m a n d . < i n i t > ( M a p p e r M e t h o d . j a v a :…

数据库MYSQL no.2

1.加法 加法&#xff1a;在java中有运算和拼接的功能&#xff0c;但是数据库中加号只做运算。 拼接是concat&#xff08;...&#xff0c;...&#xff09; 2. IFNULL ifnull(字段&#xff0c;0) 为null就返回逗号后面的东西0. 3.条件查询&#xff1a; 1.条件表达式 &#…

第84讲:基于各种场景使用mysqldump逻辑备份数据库

文章目录 1.mysqldump备份工具的语法格式2.使用mysqldump进行全库备份3.备份单个库或者多个库的数据4.备份某个库下的单表或者多表的数据5.mysqldump备份数据库时必加的一些参数5.1.基本参数5.2.核心参数 6.mysqldump备份数据库时的一些其他参数 1.mysqldump备份工具的语法格式…

条件随机场 (CRF) 的损失函数以及faiss 的原理介绍

1、条件随机场 (CRF) 的损失函数 条件随机场&#xff08;CRF&#xff09;是一种统计建模方法&#xff0c;常用于结构化预测问题&#xff0c;如序列标注、分词和命名实体识别等。在CRF模型中&#xff0c;损失函数用于衡量模型预测的标记序列与真实标记序列之间的差异。CRF的目标…