Vue 3 中实现表格单元格点击切换文本内容的交互式显示

本教程详细介绍了在 vue 3 应用中，如何通过管理组件的响应式状态，实现表格（

Vue 3 表格单元格点击切换文本内容教程

在前端开发中，表格是展示数据的重要组件。当表格中的某些文本内容较长时，我们通常会选择截断显示，并在用户需要时提供查看完整内容的功能。本文将指导您如何在 Vue 3 中，通过点击表格单元格（

核心原理

Vue 3 遵循数据驱动视图的原则。直接在 @click 事件中尝试修改 v-text 的值是无效的，因为 v-text 是一个指令，它绑定到组件的响应式数据。要实现动态切换，我们需要：

1. 定义一个响应式状态来记录当前哪个单元格的内容应该被展开。
2. 在表格循环中，为每个单元格添加点击事件监听器，以更新这个响应式状态。
3. 根据响应式状态的值，使用条件渲染来决定 元素显示截断文本还是完整文本。

   实现步骤

   我们将以一个展示邮件主题的表格为例，演示如何实现点击单元格切换显示截断主题和完整主题的功能。

   1. 定义响应式状态

   首先，在您的 Vue 组件的

   

   Kaiber

   Kaiber是一个视频生成引擎，用户可以根据自己的图片或文字描述创建视频

   下载

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

   2. 更新模板逻辑

   接下来，修改您的表格模板。在 v-for 循环中，确保您能够获取到当前项的 index。然后，为需要切换文本的

   元素添加 @click 事件处理器和条件 v-text 绑定。

   代码解释：

   • v-for="(email, index) in emails.data": 我们现在不仅获取 email 对象，还获取其在数组中的 index。
   • @click="currentShownEmailIndex = currentShownEmailIndex === index ? -1 : index":
     • 当点击 时，此表达式会检查 currentShownEmailIndex 是否与当前行的 index 相同。
     • 如果相同，表示当前行已展开，再次点击则将其收起（currentShownEmailIndex 设为 -1）。
     • 如果不相同，表示当前行未展开或展开的是其他行，点击后将其展开（currentShownEmailIndex 设为当前行的 index）。
     • v-text="currentShownEmailIndex === index ? store.getSubject(email) : store.getSubjectTruncated(email)":
       • 这是一个条件表达式。如果 currentShownEmailIndex 等于当前行的 index，则显示 store.getSubject(email)（完整主题）。
       • 否则，显示 store.getSubjectTruncated(email)（截断主题）。
     • :title="store.getSubject(email)": 保持 title 属性不变，以便用户在鼠标悬停时仍然能看到完整主题，提供额外的用户体验。
     • class="subject-cell": 为单元格添加样式类，方便通过 CSS 增加 cursor: pointer 等视觉提示。

     完整示例代码

     
     
     
     
     
     
         
     
             
     
                 
     
                     
                         
                         
     PHP学习
                     
                 
             
         
         
     
             
     
                 
     
                     
                         
                         
     技术支持
                     
                 
             
         
         
     
             
     
                 
     
                     
                         
                         
     返回顶部