本教程详细介绍了在 vue 3 应用中，如何通过管理组件的响应式状态，实现表格（<td>）单元格点击时动态切换显示文本内容的功能。我们将利用 ref 定义当前展开项的索引，并结合条件渲染（v-text）来实现在截断文本和完整文本之间的无缝切换，从而提升用户交互体验。
Vue 3 表格单元格点击切换文本内容教程
在前端开发中，表格是展示数据的重要组件。当表格中的某些文本内容较长时，我们通常会选择截断显示，并在用户需要时提供查看完整内容的功能。本文将指导您如何在 Vue 3 中，通过点击表格单元格（<td>）来实现文本内容的动态切换，例如在截断文本和完整文本之间进行切换。
核心原理
Vue 3 遵循数据驱动视图的原则。直接在 @click 事件中尝试修改 v-text 的值是无效的，因为 v-text 是一个指令，它绑定到组件的响应式数据。要实现动态切换，我们需要：
- 定义一个响应式状态来记录当前哪个单元格的内容应该被展开。
- 在表格循环中，为每个单元格添加点击事件监听器，以更新这个响应式状态。
- 根据响应式状态的值，使用条件渲染来决定 <td> 元素显示截断文本还是完整文本。
实现步骤
我们将以一个展示邮件主题的表格为例，演示如何实现点击单元格切换显示截断主题和完整主题的功能。
1. 定义响应式状态
首先，在您的 Vue 组件的 <script setup> 块中，定义一个 ref 来存储当前被点击并展开的邮件的索引。我们将其初始化为 -1，表示默认情况下没有邮件主题被展开。
立即学习“前端免费学习笔记（深入）”；
<script setup>
import { ref } from 'vue';
// 假设 emails 是从某个 store 或 API 获取的邮件数据
const emails = ref({
data: [
{ id: 1, subject: '这是一封非常长的邮件主题，需要被截断显示以节省空间，方便用户快速浏览。', body: '内容1' },
{ id: 2, subject: '另一封简短的邮件主题', body: '内容2' },
// 更多邮件数据...
]
});
// 模拟 store 对象，提供获取截断和完整主题的方法
const store = {
getSubjectTruncated: (email) => {
if (!email.subject) return '';
const maxLength = 25; // 定义截断长度
return email.subject.length > maxLength ? email.subject.substring(0, maxLength) + '...' : email.subject;
},
getSubject: (email) => email.subject || ''
};
// 定义响应式状态，用于跟踪当前显示完整主题的邮件索引
const currentShownEmailIndex = ref(-1);
</script>2. 更新模板逻辑
接下来，修改您的表格模板。在 v-for 循环中，确保您能够获取到当前项的 index。然后，为需要切换文本的 <td> 元素添加 @click 事件处理器和条件 v-text 绑定。
<template>
<div class="email-table-container">
<h2>邮件列表</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>邮件主题</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(email, index) in emails.data" :key="email.id">
<td>{{ email.id }}</td>
<td
@click="currentShownEmailIndex = currentShownEmailIndex === index ? -1 : index"
v-text="currentShownEmailIndex === index ? store.getSubject(email) : store.getSubjectTruncated(email)"
:title="store.getSubject(email)"
class="subject-cell"
></td>
<td><button @click="alert('查看邮件详情')">详情</button></td>
</tr>
</tbody>
</table>
</div>
</template>代码解释：
- v-for="(email, index) in emails.data": 我们现在不仅获取 email 对象，还获取其在数组中的 index。
- @click="currentShownEmailIndex = currentShownEmailIndex === index ? -1 : index":
- 当点击 <td> 时，此表达式会检查 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 等视觉提示。
完整示例代码
<template>
<div class="email-table-container">
<h2>邮件列表</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>邮件主题</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(email, index) in emails.data" :key="email.id">
<td>{{ email.id }}</td>
<td
@click="currentShownEmailIndex = currentShownEmailIndex === index ? -1 : index"
v-text="currentShownEmailIndex === index ? store.getSubject(email) : store.getSubjectTruncated(email)"
:title="store.getSubject(email)"
class="subject-cell"
></td>
<td><button @click="alert('查看邮件详情')">详情</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 模拟邮件数据
const emails = ref({
data: [
{ id: 1, subject: '这是一封非常长的邮件主题，需要被截断显示以节省空间，方便用户快速浏览。', body: '内容1' },
{ id: 2, subject: '另一封简短的邮件主题', body: '内容2' },
{ id: 3, subject: '关于项目进度的最新更新和会议纪要，请查阅附件。', body: '内容3' },
{ id: 4, subject: '重要通知：系统升级维护计划', body: '内容4' },
{ id: 5, subject: '这是一封测试邮件，用于演示表格单元格点击切换文本功能。', body: '内容5' },
]
});
// 模拟 store 对象，提供获取截断和完整主题的方法
const store = {
getSubjectTruncated: (email) => {
if (!email.subject) return '';
const maxLength = 25; // 定义截断长度
return email.subject.length > maxLength ? email.subject.substring(0, maxLength) + '...' : email.subject;
},
getSubject: (email) => email.subject || ''
};
// 定义响应式状态，用于跟踪当前显示完整主题的邮件索引
const currentShownEmailIndex = ref(-1);
// 示例函数，用于演示其他操作
const alert = (msg) => {
window.alert(msg);
};
</script>
<style scoped>
.email-table-container {
padding: 20px;
font-family: Arial, sans-serif;
}
table {
width: 100%;
border 
