本教程详细介绍了在 vue 3 中，如何通过点击表格单元格（<td>）来动态切换其显示内容，实现截断文本与完整文本之间的切换。核心方法是利用 vue 的响应式引用（ref）来管理当前展开的状态，并结合条件渲染（v-text）来根据状态显示不同的内容。文章提供了清晰的代码示例和实现步骤，帮助开发者优化表格的用户交互体验。
在现代前端应用中，表格是展示大量数据的重要组件。为了保持界面的整洁和可读性，我们经常需要对过长的文本进行截断显示。然而，用户在需要时应能方便地查看完整内容。本文将指导您如何在 Vue 3 应用中，通过点击表格单元格（<td>）来实现截断文本与完整文本之间的动态切换。
核心思路
实现这一功能的核心在于利用 Vue 3 的响应式系统来管理当前被点击并展开的单元格状态。我们将使用一个响应式引用（ref）来存储当前处于“展开”状态的表格行索引。当用户点击某个单元格时，我们根据其索引来更新这个响应式变量，并利用条件渲染（通过三元表达式结合 v-text）来决定该单元格是显示截断文本还是完整文本。
实现步骤
1. 定义响应式状态变量
首先，在您的 Vue 组件的 <script setup> 块或 setup() 函数中，定义一个响应式变量来追踪当前显示完整内容的行索引。我们将初始值设置为 -1，表示默认没有任何行是展开状态。
<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. 更新模板结构与逻辑
接下来，修改您的表格模板，为目标 <td> 元素添加点击事件监听器和条件渲染逻辑。
- 遍历数据时获取索引: 确保您的 v-for 循环能够获取到当前项的索引。
- 添加点击事件: 在 <td> 上添加 @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":
- 当点击 <td> 时，这个表达式会执行。
- 如果 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 属性，可以在鼠标悬停时仍然显示完整主题，提供更好的用户体验。
完整示例代码
为了更好地理解，这里提供一个包含 <script setup> 和 <template> 的完整组件示例。
<template>
<div>
<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="currentShownEmail = currentShownEmail === index ? -1 : index"
v-text="currentShownEmail === index ? store.getSubject(email) : store.getSubjectTruncated(email)"
:title="store.getSubject(email)"
style="cursor: pointer; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
></td>
<td>{{ email.sender }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
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，表示没有邮件主题被展开
</script>
<style scoped>
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;
}
</style>在上述示例中，我们添加了一些基本的 CSS 样式来模拟截断效果，并使可点击的单元格更具视觉提示。
注意事项
- 唯一标识: 确保 v-for 中的 key 属性是唯一的，这有助于 Vue 高效地更新列表。同时，currentShownEmail 追踪的索引也需要是稳定的。
- 性能考量: 对于包含成千上万条数据的大型表格，频繁的 DOM 更新可能会影响性能。在这种情况下，可以考虑使用虚拟滚动（Virtual Scrolling）库来优化渲染。
- 可访问性 (Accessibility): 为了提高可访问性，您可以考虑为可点击的 <td> 添加 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 项目中高效地实现这一常见需求。
