投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. web前端

Vue 3：点击表格单元格动态切换截断与完整文本显示

程序猿 • • web前端 • 阅读 0

Vue 3：点击表格单元格动态切换截断与完整文本显示

本教程详细介绍了在 vue 3 中，如何通过点击表格单元格（

）来动态切换其显示内容，实现截断文本与完整文本之间的切换。核心方法是利用 vue 的响应式引用（ref）来管理当前展开的状态，并结合条件渲染（v-text）来根据状态显示不同的内容。文章提供了清晰的代码示例和实现步骤，帮助开发者优化表格的用户交互体验。

在现代前端应用中，表格是展示大量数据的重要组件。为了保持界面的整洁和可读性，我们经常需要对过长的文本进行截断显示。然而，用户在需要时应能方便地查看完整内容。本文将指导您如何在 Vue 3 应用中，通过点击表格单元格（

）来实现截断文本与完整文本之间的动态切换。

核心思路

实现这一功能的核心在于利用 Vue 3 的响应式系统来管理当前被点击并展开的单元格状态。我们将使用一个响应式引用（ref）来存储当前处于“展开”状态的表格行索引。当用户点击某个单元格时，我们根据其索引来更新这个响应式变量，并利用条件渲染（通过三元表达式结合 v-text）来决定该单元格是显示截断文本还是完整文本。

实现步骤

1. 定义响应式状态变量

首先，在您的 Vue 组件的 块或 setup() 函数中，定义一个响应式变量来追踪当前显示完整内容的行索引。我们将初始值设置为 -1，表示默认没有任何行是展开状态。

import { ref } from 'vue';// 假设 emails.data 和 store 已经定义或从父组件传入// const emails = ref({ data: [...] });// const store = {//   getSubjectTruncated: (email) => email.subject.substring(0, 20) + '...',//   getSubject: (email) => email.subject// };const currentShownEmail = ref(-1); // 用于存储当前显示完整主题的邮件索引

currentShownEmail 变量将作为我们判断哪个单元格应该显示完整内容的依据。当它的值等于某行的索引时，该行的对应单元格将显示完整内容；否则，显示截断内容。

立即学习“前端免费学习笔记（深入）”；

2. 更新模板结构与逻辑

接下来，修改您的表格模板，为目标

元素添加点击事件监听器和条件渲染逻辑。

Elser AI Comics Elser AI Comics

一个免费且强大的AI漫画生成工具，助力你三步创作自己的一出好戏

Elser AI Comics 522 查看详情 Elser AI Comics 遍历数据时获取索引: 确保您的 v-for 循环能够获取到当前项的索引。添加点击事件: 在

上添加 @click 事件监听器，当用户点击时，更新 currentShownEmail 的值。条件渲染 v-text: 使用三元表达式来判断 currentShownEmail 是否等于当前行的索引，从而决定 v-text 绑定的是截断文本还是完整文本。

  
          
        主题

代码解释:

v-for=”(email, index) in emails.data”: 我们在循环中引入了 index，这是实现状态追踪的关键。@click=”currentShownEmail = currentShownEmail === index ? -1 : index”:当点击

时，这个表达式会执行。如果 currentShownEmail 当前等于 index（表示该行已经展开），则将其重置为 -1（收起该行）。如果 currentShownEmail 不等于 index（表示该行未展开或展开的是其他行），则将其设置为当前的 index（展开该行）。这个逻辑实现了点击切换展开/收起的功能。v-text=”currentShownEmail === index ? store.getSubject(email) : store.getSubjectTruncated(email)”:这是一个条件绑定。如果 currentShownEmail 等于当前行的 index，则显示 store.getSubject(email)（完整主题）。否则，显示 store.getSubjectTruncated(email)（截断主题）。:title=”store.getSubject(email)”: 保留 title 属性，可以在鼠标悬停时仍然显示完整主题，提供更好的用户体验。

完整示例代码

为了更好地理解，这里提供一个包含 和 的完整组件示例。

  
    
邮件列表
    
              
          ID          主题          发件人        
                    
          {{ email.id }}                    {{ email.sender }}        
          
  
import { ref, reactive } from 'vue';// 模拟数据存储（可以是 Pinia Store, Vuex Store 或简单的 reactive 对象）const store = {  getSubjectTruncated: (email) => {    const subject = email.subject;    return subject.length > 30 ? subject.substring(0, 27) + '...' : subject;  },  getSubject: (email) => email.subject};// 模拟邮件数据const emails = reactive({  data: [    { id: 1, subject: '这是一封非常长的邮件主题，需要被截断显示，点击后才能看到完整内容。', sender: 'alice@example.com' },    { id: 2, subject: '简短主题', sender: 'bob@example.com' },    { id: 3, subject: '另一个需要截断的邮件主题，它也相当长，并且包含一些专业术语。', sender: 'charlie@example.com' },    { id: 4, subject: '测试邮件', sender: 'diana@example.com' },  ]});const currentShownEmail = ref(-1); // 初始化为 -1，表示没有邮件主题被展开table {  width: 100%;  border-collapse: collapse;  margin-top: 20px;}th, td {  border: 1px solid #ddd;  padding: 8px;  text-align: left;}th {  background-color: #f2f2f2;}/* 针对 td 的样式，使其在未展开时看起来像可点击的截断文本 */td[title] {  max-width: 300px; /* 限制宽度 */  white-space: nowrap; /* 不换行 */  overflow: hidden; /* 隐藏超出部分 */  text-overflow: ellipsis; /* 显示省略号 */}td[title]:hover {  background-color: #f9f9f9;}

在上述示例中，我们添加了一些基本的 CSS 样式来模拟截断效果，并使可点击的单元格更具视觉提示。

注意事项

唯一标识: 确保 v-for 中的 key 属性是唯一的，这有助于 Vue 高效地更新列表。同时，currentShownEmail 追踪的索引也需要是稳定的。性能考量: 对于包含成千上万条数据的大型表格，频繁的 DOM 更新可能会影响性能。在这种情况下，可以考虑使用虚拟滚动（Virtual Scrolling）库来优化渲染。可访问性 (Accessibility): 为了提高可访问性，您可以考虑为可点击的

添加 role=”button” 或 aria-expanded 等 ARIA 属性，并确保键盘用户也能通过 tab 键聚焦并使用 Enter 或 Space 键触发点击事件。多列扩展: 如果需要在一个表格行中同时展开多个不同列的内容，您可以将 currentShownEmail 替换为一个对象或更复杂的结构，来存储每个单元格的状态，例如 { rowIndex: 1, colName: ‘subject’, expanded: true }。全局状态管理: 如果表格数据和其显示状态需要在多个组件间共享，可以考虑使用 Pinia 或 Vuex 等状态管理库来管理 currentShownEmail 这样的状态。

总结

通过利用 Vue 3 的响应式引用 ref 和条件渲染 v-text，我们可以轻松地实现点击表格单元格切换文本显示状态的功能。这种模式不仅增强了用户交互体验，也保持了代码的简洁和可维护性。遵循上述步骤和注意事项，您可以在自己的 Vue 3 项目中高效地实现这一常见需求。

以上就是Vue 3：点击表格单元格动态切换截断与完整文本显示的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/912040.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

303.1K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年11月29日 02:52:34
下一篇 2025年11月29日 02:52:56

相关推荐

  • Laravel中实现动态加载职位详情页面的教程 好文分享

    Laravel中实现动态加载职位详情页面的教程

    本教程旨在指导开发者如何在laravel应用中实现动态加载职位详情页面。我们将探讨如何通过修改列表页面的“详情”按钮，利用动态路由和控制器方法，根据职位id从数据库获取并展示相应的详细信息。内容将涵盖视图层、路由配置和控制器逻辑，确保用户点击列表中的任一职位详情按钮时，都能准确跳转并显示该职位的专属…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • HTML锚点链接在特定路径下导致页面重载的解决方案 好文分享

    HTML锚点链接在特定路径下导致页面重载的解决方案

    本教程旨在解决html锚点链接（`#id`）在特定url路径下意外触发页面重载而非平滑滚动的问题。核心在于理解浏览器如何解析相对路径的锚点链接。当页面位于非根目录时，仅使用`#id`可能导致浏览器跳转到根目录的相应锚点。解决方案是为锚点链接的`href`属性提供包含当前页面完整路径的绝对或相对路径，…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • AJAX请求无法填充Select标签的解决方案 好文分享

    AJAX请求无法填充Select标签的解决方案

    本文旨在解决在使用AJAX动态填充Select标签时遇到的数据无法显示问题。通过分析常见错误原因，提供基于`$(document).on(“click”, selector, function(){})`的解决方案，并详细阐述其原理和使用方法，确保数据能够正确加载到Selec…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • 掌握CodeIgniter中LIKE查询的正确姿势 好文分享

    掌握CodeIgniter中LIKE查询的正确姿势

    本文旨在解决CodeIgniter Query Builder中`WHERE`与`LIKE`查询行为差异导致的常见问题。我们将深入探讨`LIKE`查询的机制，特别是通配符的使用，并提供如何在CodeIgniter中正确构建模糊查询的示例代码和最佳实践，确保您能准确地从数据库中检索所需数据。 理解SQ…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • 如何在PHP中访问多维数组中的特定嵌套键 好文分享

    如何在PHP中访问多维数组中的特定嵌套键

    本教程详细介绍了如何在php中高效地访问和提取多维嵌套数组中的特定键值。通过分析常见的错误和提供结构化的循环遍历方法，文章展示了如何通过嵌套`foreach`循环精确地定位并输出深层嵌套的`status`键的值，确保开发者能够准确地从复杂数据结构中获取所需信息。 在PHP开发中，处理复杂的多维数组是…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • php数据如何实现用户登录和注册_php数据认证与授权系统开发 好文分享

    php数据如何实现用户登录和注册_php数据认证与授权系统开发

    实现用户登录和注册功能是大多数Web应用的基础需求。使用PHP开发时，结合数据库存储和安全机制，可以构建一个简单但可靠的认证系统。以下是实现用户注册、登录以及基础授权的完整流程和关键代码示例。 用户注册：数据收集与安全存储 用户注册的核心是将用户名、密码等信息存入数据库，同时确保密码不以明文保存。 …

    程序猿的头像 程序猿
    2025年12月12日
    000
  • Laravel 动态邮件服务器配置（Laravel 6.2） 好文分享

    Laravel 动态邮件服务器配置（Laravel 6.2）

    本文针对 Laravel 6.2 版本，探讨如何在运行时动态切换邮件服务器配置。通过清除已解析的邮件服务实例并重新设置配置，可以在队列任务中实现灵活的邮件发送策略。本文提供了一种可行的解决方案，并强调了升级到 Laravel 8 的重要性。 在 Laravel 应用中，有时需要在运行时根据特定条件动…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • 如何使用 CSS 增大 HTML 按钮的字体大小 好文分享

    如何使用 CSS 增大 HTML 按钮的字体大小

    本文将详细介绍如何使用 CSS 来调整 HTML 按钮的字体大小，解决字体大小设置无效的问题，并提供一个简单的示例代码。同时，还将简要介绍如何使用 JavaScript 实现点击按钮显示文本框的功能。 调整 HTML 按钮字体大小 在 CSS 中设置字体大小时，需要明确指定单位。常见的单位包括像素 …

    程序猿的头像 程序猿
    2025年12月12日
    000
  • PHP命令怎么限制执行时间_PHP设置命令执行超时时间方法 好文分享

    PHP命令怎么限制执行时间_PHP设置命令执行超时时间方法

    推荐使用proc_open配合stream_select实现超时控制，通过监控管道流并在超时后终止进程，精确管理外部命令执行时间。 在使用PHP执行外部命令时，如果不加以控制，可能会因为命令长时间不返回而导致脚本卡住。因此，限制命令的执行时间非常重要。PHP本身没有直接提供“超时”参数给exec、s…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • 使用PHP和Font Awesome高效显示星级评分（含半星） 好文分享

    使用PHP和Font Awesome高效显示星级评分（含半星）

    本文将介绍如何利用php和font awesome图标，以简洁高效的方式实现星级评分的显示，尤其侧重于精确处理半星情况。通过优化传统冗长的条件判断，文章提供了一种更具可读性和维护性的解决方案，帮助开发者轻松构建动态星级展示功能，避免了复杂的if/else if结构，提高了代码的优雅性。 在Web开发…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • Laravel Eloquent：高效统计与多条件时间范围查询指南 好文分享

    Laravel Eloquent：高效统计与多条件时间范围查询指南

    本文详细介绍了如何在 laravel 中使用 eloquent orm 进行多条件数据统计，特别是针对特定用户、特定状态码，并结合时间范围（如当天或最近24小时）进行精确过滤和计数。通过示例代码，阐述了如何构建复杂的 `where` 子句以及如何利用 `count()` 方法获取结果总数，同时提供了…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • 提升代码可读性：早期返回语句与else块的实用权衡 好文分享

    提升代码可读性：早期返回语句与else块的实用权衡

    在函数中，使用早期返回（`return`）语句与使用`else`块在技术上没有功能差异。然而，早期返回可以有效减少代码嵌套层级，从而显著提升代码的可读性和维护性，尤其适用于处理前置条件和错误检查的场景。本文将深入探讨这两种控制流模式的优劣，并提供实践建议。 功能等价性：技术无差异 首先，需要明确的是…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • Laravel 动态配置邮件服务器（Laravel 6.2） 好文分享

    Laravel 动态配置邮件服务器（Laravel 6.2）

    本文针对 Laravel 6.2 中动态配置邮件服务器的需求，提供了一种有效的解决方案。通过修改配置、清除实例并重新绑定，可以在运行时动态切换邮件服务器，从而满足根据不同业务场景发送邮件的需求。本文将详细介绍具体实现步骤，并提供示例代码，帮助开发者快速解决该问题。 在 Laravel 6.2 中，动…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • Laravel 中实现双向匹配关系的 Eloquent 教程 好文分享

    Laravel 中实现双向匹配关系的 Eloquent 教程

    本文深入探讨了在 Laravel 应用中构建类似 Tinder 的双向匹配（mutual match）关系。针对初始尝试中 `matches` 关系为空的问题，我们分析了其根本原因，即在关系定义中依赖未加载的模型实例。核心解决方案是利用数据库 `JOIN` 操作直接在 Eloquent 关系中识别双…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • PHP使用XPath合并XML日历事件数据教程 好文分享

    PHP使用XPath合并XML日历事件数据教程

    本教程旨在解决php处理xml日历数据时，如何将同一日期的多个事件合并显示的问题。通过利用simplexml和xpath的强大功能，即使无法修改原始xml文件，也能高效地解析并重组数据，实现按日期分组的清晰输出，从而提升数据展示的可读性。 引言 在Web开发中，我们经常需要处理来自各种数据源的XML…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • Laravel 多对多关系：实现用户互赞匹配功能的正确姿势 好文分享

    Laravel 多对多关系：实现用户互赞匹配功能的正确姿势

    本文探讨了在 laravel 中构建类似 tinder 的互赞匹配功能时，如何正确定义多对多关系。针对常见的 `matches` 关系返回空数组的问题，我们分析了在关系定义中使用已加载模型数据的局限性，并提供了一种基于数据库连接（join）的解决方案，确保在预加载时也能准确获取互赞用户列表，并提供了…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • PHP代码怎么实现定时任务调度_PHP计划任务与crontab配置 好文分享

    PHP代码怎么实现定时任务调度_PHP计划任务与crontab配置

    答案：PHP定时任务推荐使用crontab配合CLI模式执行脚本，通过系统级计划任务确保稳定运行；也可在应用内模拟触发，但依赖用户访问，可靠性低；框架如Laravel提供调度管理，仅需一条crontab入口，由PHP统一调度。 在PHP开发中，实现定时任务调度通常有两种方式：一种是利用服务器的cro…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • php数据如何使用依赖注入容器_php数据IoC容器设计与实现 好文分享

    php数据如何使用依赖注入容器_php数据IoC容器设计与实现

    首先实现一个简单的PHP IoC容器，具备绑定接口与实现、管理单例与瞬时实例、自动解析构造函数依赖及闭包绑定功能，通过反射机制解析类依赖并注入，使类无需主动创建依赖对象，从而解耦代码；示例中将LoggerInterface绑定到FileLogger，容器自动注入UserService所需日志实例，最…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • PHP框架如何进行单元测试_PHP框架PHPUnit测试用例编写 好文分享

    PHP框架如何进行单元测试_PHP框架PHPUnit测试用例编写

    单元测试是提升PHP框架代码质量的关键，PHPUnit作为主流工具，通过Composer安装并配置phpunit.xml后，可编写继承TestCase的测试类，使用assertEquals等断言验证逻辑，结合expectException测试异常，并利用createMock隔离外部依赖，确保测试独立…

    程序猿的头像 程序猿
    2025年12月12日
    000
  • PHP：将嵌套层级数据结构扁平化为线性列表 好文分享

    PHP：将嵌套层级数据结构扁平化为线性列表

    本文详细介绍了如何将复杂的php嵌套层级数据结构（如带有`children`属性的分类树）转换为一个简单的、不含层级关系的扁平化列表。教程涵盖了将php对象转换为可操作数组的通用方法，并提供了一个高效的递归函数来遍历并提取所有节点，最终生成一个易于处理的线性数组。 理解问题：层级数据结构与目标扁平化…

    程序猿的头像 程序猿
    2025年12月12日
    000

发表回复

登录后才能评论
关注微信