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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-12

浏览次数：次

返回列表

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

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

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

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

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

核心思路

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

实现步骤

1. 定义响应式状态变量

首先，在您的 Vue 组件的

<script setup>
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); // 用于存储当前显示完整主题的邮件索引
</script>

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

2. 更新模板结构与逻辑

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

Tanka

具备AI长期记忆的下一代团队协作沟通工具

146 查看详情 Tanka

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

遍历数据时获取索引: 确保您的 v-for 循环能够获取到当前项的索引。
添加点击事件: 在上添加 @click 事件监听器，当用户点击时，更新 currentShownEmail 的值。
条件渲染 v-text: 使用三元表达式来判断 currentShownEmail 是否等于当前行的索引，从而决定 v-text 绑定的是截断文本还是完整文本。

<template>
  <table>
    <thead>
      <tr>
        <th>主题</th>
        <!-- 其他表头 -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="(email, index) in emails.data" :key="email.id">
        <td
          @click="currentShownEmail = currentShownEmail === index ? -1 : index"
          v-text="currentShownEmail === index ? store.getSubject(email) : store.getSubjectTruncated(email)"
          :title="store.getSubject(email)"
        ></td>
        <!-- 其他单元格 -->
      </tr>
    </tbody>
  </table>
</template>

代码解释:

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 属性，可以在鼠标悬停时仍然显示完整主题，提供更好的用户体验。