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

<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>

<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>

<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>