Vxe UI vue vxe-table vxe-text-ellipsis 如何实现单元格多行文本超出、多行文本溢出省略
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>
效果
固定行高

动态行高

相关文章:
Vxe UI vue vxe-table vxe-text-ellipsis 如何实现单元格多行文本超出、多行文本溢出省略
Vxe UI vue vxe-table 如何实现单元格多行文本超出、多行文本溢出省略 代码 配合 vxe-text-ellipsis 组件实现多行文本溢出省略 <template><div><vxe-grid v-bind"gridOptions"><template #defaultAddress"{ row }"><vxe-te…...
FFmpeg源码:avio_feof函数分析
AVIOContext结构体和其相关的函数分析: FFmpeg源码:avio_r8、avio_rl16、avio_rl24、avio_rl32、avio_rl64函数分析 FFmpeg源码:read_packet_wrapper、fill_buffer函数分析 FFmpeg源码:avio_read函数分析 FFmpeg源码ÿ…...
各省-城镇化率(2001-2022年)
数据收集各省-城镇化率(2001-2022年).zip资源-CSDN文库https://download.csdn.net/download/2401_84585615/89465885 相关指标: 包括省份、年份、年末总人口数(万人)、年末城镇人口数(万人)、城镇化率等。 数据集构建: 数据集通…...
飞创龙门双驱XYZ直线模组高精度应用实例
飞创龙门双驱XYZ直线模组集超精密定位、高动态响应和灵活配置于一体,适用于电子制造行业(点胶、组装、检测)、半导体圆晶加工、芯片封装、激光切割、激光焊接、数控机床、精密检测及科研实验等,满足高精度、高动态的三维定位需求&…...
Prompt 初级版:构建高效对话的基础指南
Prompt 初级版:构建高效对话的基础指南 文章目录 Prompt 初级版:构建高效对话的基础指南一 “标准”提示二 角色提示三 多范例提示四 组合提示五 规范化提示 本文介绍了提示词的基础概念与不同类型,帮助用户更好地理解如何在对话中构建有效的…...
餐饮重点企业在AI领域的布局,看方大的AI实践
大家好,我是Shelly,一个专注于输出AI工具和科技前沿内容的AI应用教练,体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具,拥抱AI时代的到来。 AI已经被应用在餐饮餐厨行业的哪些方面&am…...
Axure PR 9 开关切换 设计交互
大家好,我是大明同学。 这期内容,我们来探讨Axure开关按钮设计与交互技巧。 创建切换开关所需的元件 1.打开一个新的 RP 文件并在画布上打开 Page 1。 2.将“圆形”元件拖到画布上,在样式窗格中将高度和宽度设置为35,线段宽度…...
ruoyi-python 若依python版本部署及新增模块
ruoyi spring版本支持一键导出前后端代码,且b站上有很多教程,但是发现python版本的教程并不多,于是自己尝试创建一个简易的CRUD模块 1.各版本bug 主要尝试了1.1.2版本和vue2的版本,链接如下: v1.1.2 vue2 两个版本…...
【理论】负载均衡
目录 1. 定义2. 主要作用3. 实现方法4. 实现原理 1. 定义 负载均衡(Load Balancing)将网络流量、请求等输入分发到后端服务器,为后端服务器提供负载均衡,实现高可用和容错。 2. 主要作用 1. 高并发 通过将请求均匀分配到多个服务…...
流行前端框架Vue.js详细学习要点
Vue.js是一款流行的JavaScript前端框架,用于构建用户界面,特别是在构建交互式Web应用程序时表现出色。以下是Vue.js详细学习的一些要点: 1. Vue.js基础 定义与特点:Vue.js是一款渐进式JavaScript框架,提供响应式数据…...
Java.数据结构.TreeMap
一、什么是TreeMap TreeMap是Java集合框架中的一部分,并且基于红黑树数据结构。这说明TreeMap能够高效地执行键值对的存储、检索、排序等操作。 二、TreeMap的特点 有序性:TreeMap会根据键的自然顺序进行排序,当然,你也可以通过…...
什么是托管安全信息和事件管理 SIEM?
什么是 SIEM? 安全信息和事件管理 ( SIEM ) 解决方案最初是一种集中式日志聚合解决方案。SIEM 解决方案会从整个组织网络中的系统收集日志数据,使组织能够从单一集中位置监控其网络。 随着时间的推移,SIEM解决方案已发展成为一个完整的威胁…...
vscode安装及c++配置编译
1、VScode下载 VS Code官网下载地址:Visual Studio Code - Code Editing. Redefined。 2、安装中文插件 搜索chinese,点击install下载安装中文插件。 3、VS Code配置C/C开发环境 3.1、MinGW-w64下载 VS Code是一个高级的编辑器,只能用来写代…...
JavaScript使用渐变来美化对象!
我们的目标是渐变!渐变! 首先了解,渐变分为线性渐变和径向渐变,线性渐变可以是从左上角到右下角的渐变,径向渐变是从中心向外的渐变。 JavaScript中实现渐变可以使用addColorStop的方法,例如创建一个线性渐…...
Linux之实战命令24:od应用实例(五十八)
简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【…...
【CKA】一、基于角色的访问控制-RBAC
1、基于角色的访问控制-RBAC 1. 考题内容: 2. 答题思路: 这道题就三条命令,建议直接背熟就行。 也可以查看帮助 kubectl create clusterrole -h kubectl create serviceaccount -h kubectl create rolebinding -h 注意: 1、资…...
【华为HCIP实战课程三】动态路由OSPF的NBMA环境建立邻居及排错,网络工程师
一、NBMA环境下的OSPF邻居建立问题 上节我们介绍了NBMA环境下OSPF邻居建立需要手动指定邻居,因为NBMA环境是不支持广播/组播的 上一节AR1的配置: ospf 1 peer 10.1.1.4 //手动指定邻居的接口地址,而不是RID peer 10.1.1.5 area 0.0.0.0 手动指定OSPF邻居后抓包查看OSP…...
初始Kafka
1、Kafka是什么? Kafka是由Scala语言开发的一个多分区、多副本,基于Zookeeper集群协调的系统。 那这个所谓的系统又是什么系统呢? 回答这个问题要从发展的角度来看:起初Kafka的定位是分布式消息系统。但是目前它的定位是一个分布…...
学会使用maven工具看这一篇文章就够了
文章目录 概述一、定义与功能二、核心组件三、主要作用四、仓库管理 settings.xml说明一、文件位置与优先级二、主要配置元素三、配置示例 pom.xml文件说明一、pom.xml的基本结构二、pom.xml的主要元素及其说明三、依赖管理四、常用插件五、其他配置 maven安装配置一、下载Mave…...
如何创建虚拟环境并实现目标检测及验证能否GPU加速
创建虚拟环境: 先创建一个虚拟python环境,敲如下代码 然后再到该虚拟环境里面安装自己想要的包 激活虚拟环境 然后再聚类训练这些 验证GPU加速 阿里源 pip install torch torchvision -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mir…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
算法笔记2
1.字符串拼接最好用StringBuilder,不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
