Vxe UI vue vxe-table vxe-text-ellipsis 如何实现单元格多行文本超出、多行文本溢出省略

news2024/12/24 8:52:26

Vxe UI vue vxe-table 如何实现单元格多行文本超出、多行文本溢出省略

代码

配合 vxe-text-ellipsis 组件实现多行文本溢出省略

<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <template #defaultAddress="{ row }">
        <vxe-text-ellipsis line-clamp="3" :content="row.address"></vxe-text-ellipsis>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
  border: true,
  showOverflow: true,
  height: 500,
  columnConfig: {
    resizable: true
  },
  rowConfig: {
    height: 80
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex', width: 100 },
    { field: 'address', title: 'Address', width: 400, slots: { default: 'defaultAddress' } }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: '这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略,这将非常有用,如果没有超出,则显示全部文本,如超出指定行数之后,文字会被会自动截断,并且会出现省略,后面文字会被隐藏将不会被显示出来。' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: '这是一个多行的文本溢出省略组件' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: '这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: '这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略,这将非常有用,如果没有超出,则显示全部文本,如超出指定行数之后,文字会被会自动截断,并且会出现省略,后面文字会被隐藏将不会被显示出来。' },
    { id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', age: 42, address: '这是一个多行的文本溢出省略组件' },
    { id: 10006, name: 'Test6', role: 'PM', sex: 'Women', age: 36, address: '这是一个多行的文本溢出省略组件' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', age: 39, address: '这是一个多行的文本溢出省略组件,用于实现多行文本溢出省略,这将非常有用,如果没有超出,则显示全部文本,如超出指定行数之后,文字会被会自动截断,并且会出现省略,后面文字会被隐藏将不会被显示出来。' },
    { id: 10008, name: 'Test8', role: 'Designer', sex: 'Women', age: 56, address: '这是一个多行的文本溢出省略组件' }
  ]
})

</script>

效果

固定行高
在这里插入图片描述
动态行高
在这里插入图片描述

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

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

相关文章

2025届 深圳 嵌入式岗 秋招上岸记录

文章目录 1 背景2 准备阶段2.1 前期2.1.1 掌握的技术栈2.1.2 项目经历2.1.3 比赛&奖学金经历 2.2 中期2.2.1 简历准备2.2.2 个人信息准备2.2.3 企业以及岗位信息的收集2.2.4 个人资料的准备 2.3 简历投递2.3.1 网申2.3.2 招聘会现场投递 3. 简历投递后3.1 测评3.2 笔试3.3 …

镜像电流源与其应用(防倒灌电路)

目录&#xff1a; 1、镜像电流源 2、防倒灌电路 1&#xff09;输入防反接保护 2&#xff09;输出防倒灌功能 1、镜像电流源 如下图1.1所示&#xff0c;三极管Q1的发射极经过b极&#xff0c;再通过R1电阻&#xff0c;形成回路&#xff0c;此时有回路电流形成。设Vbe -0.7…

C++杂项

作业&#xff1a; 将之前实现的顺序表、栈、队列都更改成模板类 顺序表 #include <iostream>using namespace std;template<typename T>class SeqList { private:T *ptr;int size; //总长度int len 0; //当前顺序表实际长度public://初始…

【笔记】X射线物理基础

一、X射线衍射分析简史 1895年X射线发现 1896 年 2 月对骨折的观察&#xff1a;G.和 E. Frost是第一个使用 X 射线进行医疗用途 1897 年法国海关官员的行李扫描。 X射线衍射理论1 X射线衍射理论2 元素的特征X射线 X射线光电子的应用 电磁波的粒子属性 X射线层析成像法 X-ray…

《CARAT: Contrastive Feature Reconstruction and Aggregation...》中文校对版

系列论文研读目录 例如&#xff1a; 文章目录 系列论文研读目录摘要引言相关作品方法论问题定义单模态标签特征提取基于对比重建的融合 基于Shuffle的特征聚合实验实验设置实验结果 分析结论 摘要 多模态多标签情感识别&#xff08;Multi-modal multi-label emotion recognit…

windows10使用bat脚本安装前后端环境之redis注册服务

首先需要搞清楚redis在本地是怎么安装配置、然后在根据如下步骤编写bat脚本&#xff1a; 思路 1.下载zip格式redis 2.查看windows server服务是否已安装redis 3.启动查看服务是否正常 bat脚本 echo off echo windows10 x64 server redis init REM 请求管理员权限并隐藏窗口 …

Total Blocking Time指标

Total Blocking Time 总阻塞时间 (TBT) 是一项用于衡量加载响应能力的重要实验指标&#xff0c;因为它有助于量化网页在变为可靠交互之前处于非交互状态的严重程度。 TBT&#xff08;Total Blocking Time&#xff09;&#xff0c;阻塞总时间&#xff0c;记录在 FCP 到 TTI 之间…

大厂太卷了!又一款一站式AI短剧创作神器,这套AI工作流厉害了:自动生成脚本、角色、分镜、视频、音乐、字幕...(附保姆级教程)

大家好&#xff0c;我是程序员X小鹿&#xff0c;前互联网大厂程序员&#xff0c;自由职业2年&#xff0c;也一名 AIGC 爱好者&#xff0c;持续分享更多前沿的「AI 工具」和「AI副业玩法」&#xff0c;欢迎一起交流~ 行业在卷 AI 应用&#xff0c;而美图已经在卷 AI 工作流了………

每日一题|2516. 每种字符至少取 K 个|双指针、最长子串、字典

本题需要转化求解目标。 对于一个序列&#xff0c;两头收集的最少数量的时候&#xff0c;剩下的部分&#xff08;我们称之为子串&#xff09;就会对应的越长。也就是说&#xff0c;我们只要求解一个满足要求的最长子串&#xff0c;使得两边剩余的字符数量刚好满足要求。 由于…

学习threejs,实现几何体阴影效果

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言二、&#x1f340;绘制任意字体模型…

量化交易backtrader实践(三)_指标与策略篇(1)_指标简介与手工双均线策略

01_指标 指标是一个汉语词语&#xff0c;读音是zhǐ biāo&#xff0c;意思是衡量目标的参数&#xff1b;预期中打算达到的指数、规格、标准&#xff0c;一般用数据表示。 统计学术语 指标是说明总体数量特征的概念及其数值的综合&#xff0c;故又称为综合指标。在实际的统计…

使用ESPnet的 setup_anaconda.sh安装脚本一步到位,配置conda虚拟环境

使用ESPnet的 setup_anaconda.sh安装脚本一步到位&#xff0c;配置conda虚拟环境 前言 ESPnet&#xff08;End-to-End Speech Processing Toolkit&#xff09;是一款用于语音识别、语音合成等任务的开源端到端语音处理工具包。为了在不同系统上快速配置ESPnet开发环境&#x…

Serverless and Go

本篇内容是根据2019年8月份Serverless and Go音频录制内容的整理与翻译, Johnny、Mat、Jaana 和特邀嘉宾 Stevenson Jean-Pierre 讨论了 Go 世界中的Serverless。什么是Serverless&#xff0c;Serverless适用于哪些用例&#xff0c;有哪些权衡&#xff0c;以及如何在Serverles…

AI芯片WT2605C赋能厨房家电,在线对话操控,引领智能烹饪新体验:尽享高效便捷生活

在智能家居的蓬勃发展中&#xff0c;智能厨电作为连接科技与生活的桥梁&#xff0c;正逐步渗透到每一个现代家庭的厨房中。蒸烤箱作为智能厨电的代表&#xff0c;以其丰富的功能和高效的性能&#xff0c;满足了人们对美食的多样化追求。然而&#xff0c;面对众多复杂的操作功能…

每日OJ_牛客_OR59字符串中找出连续最长的数字串_双指针_C++_Java

目录 牛客_OR59字符串中找出连续最长的数字串 题目解析 C代码1 C代码2 C代码3 Java代码 牛客_OR59字符串中找出连续最长的数字串 字符串中找出连续最长的数字串_牛客题霸_牛客网 题目解析 双指针&#xff1a; 遍历整个字符串&#xff0c;遇到数字的时候&#xff0c;用双…

字符编码发展史4 — Unicode与UTF-8

上一篇《字符编码发展史3 — GB2312/Big5/GBK/GB18030》我们讲解了ANSI编码中的GB2312/Big5/GBK/GB18030。本篇我们将继续讲解字符编码的第三个发展阶段中的Unicode与UTF-8。 2.3. 第三个阶段 国际化 前面提到的第二个阶段&#xff0c;各个国家和地区各自为政&#xff0c;纷纷…

并发编程---线程与进程

业务场景&#xff1a;小明去理发店理发。 小明去理发店理发&#xff0c;完成理发需要吹&#xff0c;剪&#xff0c;洗、理的过程。由这个场景我们引用进程和线程这两个 概念。 一.进程 1.什么是进程 进程是具有独立功能的程序关于某个数据集合上的一次运行活动&#xff0c;是…

【docker】debian中配置docker(2024年9月)

首先Follow了一下菜鸟教程&#xff0c;然后遇到了curl的问题。 curl存在的问题 参见这篇文章。其中用到了vim进行编辑&#xff0c;笔者的环境是windows10putty&#xff0c;vim的粘贴操作参考这篇文章。 修改之后的curl没有问题了&#xff0c;成功把脚本下载下来了。 但是在…

LD2 Scalable Heterophilous Graph Neural Network with Decoupled Embeddings

Neurips 24 推荐指数&#xff1a; #paper/⭐⭐⭐ 领域&#xff1a;可扩展图&#xff0c;大图加速 整个文章的理论部分比较多&#xff0c;尽量尽我所能避开一些额外公式。详细文章&#xff0c;见链接 模型架构 如图&#xff0c;整个模型分为与计算和训练两部分。本文的精华在于…

Docker网络、数据卷及安全优化

目录 一、Docker网络 1、原生bridge网络 2、host网络 3、none网络 4、docker自定义桥接网络 1、Docker自定义网络 2、不同自定义网络通信 3、joined容器网络 5、Docker容器内外网访问 1、容器访问外网 2、外网访问容器 6、macvlan网络实现跨主机通信 二、Docker数据…