Vue 3 中实现点击表格单元格切换文本显示状态的教程

<script setup>
import { ref, reactive } from 'vue';

// 假设你的邮件数据和 store 已经定义
const emails = reactive({
  data: [
    { id: 1, subject: '这是一封非常长的邮件主题，需要被截断显示以便表格整洁。', body: '...' },
    { id: 2, subject: '另一封邮件主题，长度适中。', body: '...' },
    { id: 3, subject: '又一封邮件，主题也比较长，用于测试展开功能。', body: '...' },
  ]
});

// 模拟 store 对象，提供截断和完整主题的方法
const store = {
  getSubjectTruncated: (email) => {
    const maxLength = 20; // 截断长度
    return email.subject.length > maxLength ? email.subject.substring(0, maxLength) + '...' : email.subject;
  },
  getSubject: (email) => email.subject,
};

// 定义响应式变量，用于存储当前展开的邮件索引
const currentShownEmail = ref(-1); // 初始值为 -1，表示没有邮件主题被展开
</script>

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>主题</th>
        <!-- 其他表头 -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="(email, index) in emails.data" :key="email.id">
        <td>{{ email.id }}</td>
        <!-- 
          点击事件：
          如果 currentShownEmail 等于当前行的索引，则点击后将其设置为 -1（收起）；
          否则，将其设置为当前行的索引（展开）。
        -->
        <td @click="currentShownEmail = (currentShownEmail === index ? -1 : index)"
            :v-text="currentShownEmail === index ? store.getSubject(email) : store.getSubjectTruncated(email)"
            :title="store.getSubject(email)">
            <!-- 
              注意：v-text 应该直接放在元素上，而不是作为属性绑定。
              这里为了演示，直接使用插值表达式或更正为 v-text="表达式"
            -->
            {{ currentShownEmail === index ? store.getSubject(email) : store.getSubjectTruncated(email) }}
        </td>
        <!-- 其他表格数据单元格 -->
      </tr>
    </tbody>
  </table>
</template>

<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="currentShownEmail = (currentShownEmail === index ? -1 : index)"
              :title="store.getSubject(email)"
              class="subject-cell"
              :class="{ 'expanded': currentShownEmail === index }">
            {{ currentShownEmail === index ? store.getSubject(email) : store.getSubjectTruncated(email) }}
          </td>
          <td><button @click="viewEmail(email.id)">查看</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const emails = reactive({
  data: [
    { id: 1, subject: '这是一封非常长的邮件主题，需要被截断显示以便表格整洁。点击我来查看完整内容。', body: '这是邮件1的详细内容...' },
    { id: 2, subject: '另一封邮件主题，长度适中。', body: '这是邮件2的详细内容...' },
    { id: 3, subject: '又一封邮件，主题也比较长，用于测试展开功能。点击我来查看完整内容。', body: '这是邮件3的详细内容...' },
    { id: 4, subject: '短主题邮件。', body: '这是邮件4的详细内容...' },
  ]
});

const store = {
  getSubjectTruncated: (email) => {
    const maxLength = 30; // 截断长度
    return email.subject.length > maxLength ? email.subject.substring(0, maxLength) + '...' : email.subject;
  },
  getSubject: (email) => email.subject,
};

const currentShownEmail = ref(-1);

const viewEmail = (id) => {
  alert(`查看邮件 ID: ${id}`);
  // 实际应用中可能跳转到详情页或打开模态框
};
</script>

<style scoped>
.email-table-container {
  padding: 20px;
  font-family: sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.subject-cell {
  cursor: pointer;
  max-width: 300px; /* 限制单元格宽度 */
  white-space: nowrap; /* 默认不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.subject-cell.expanded {
  white-space: normal; /* 展开时允许换行 */
  overflow: visible; /* 展开时显示全部内容 */
  text-overflow: unset; /* 移除省略号 */
}

button {
  padding: 5px 10px;
  cursor: pointer;
}
</style>