Element Plus新手求助：如何用el-table实现带评论行的表格？

我是Element Plus和VueJS的新手，目前已经用原生HTML表格实现了带评论行的效果——每条数据行下方，若存在comment字段则显示对应评论内容，现在想改用Element Plus的el-table实现相同效果，求指导。

我的数据 #

[
    {
        "no": "F",
        "type": "Approval",
        "name": "Master",
        "status": "Approved",
        "processDate": "01-01-2024 10:22",
        "comment": "Helloo world!"
    },
    {
        "no": "G",
        "type": "Approval",
        "name": "Master",
        "status": "Rejected",
        "processDate": "01-01-2024 10:22",
        "comment": "Comment content 1"
    },
    {
        "no": "H",
        "type": "Draft",
        "name": "Master",
        "status": "Rejected",
        "processDate": "01-01-2024 10:22",
        "comment": "Comment content 2"
    }
]

原生HTML表格实现代码 #

<table class="w-full">
    <thead class="sticky top-0">
        <tr class="title text-center bg-indigo-200">
            <th class="p-10">No</th>
            <th class="p-10">Type</th>
            <th class="p-10">Name</th>
            <th class="p-10">Status</th>
            <th class="p-10">Process Date</th>
        </tr>
    </thead>
    <tbody class="overflow-y-auto h-96">
        <template v-for="(item, index) in props.approvalData" :key="index">
            <tr class="content-info text-center">
                <td class="px-6 py-2">{{ item.no }}</td>
                <td class="px-6 py-2">{{ item.type }}</td>
                <td class="px-6 py-2">{{ item.name }}</td>
                <td class="px-6 py-2">{{ item.status }}</td>
                <td class="px-6 py-2">{{ item.processDate }}</td>
            </tr>
            <tr v-if="item.comment" class="content-cmt bg-gray-100">
                <td class="px-6 py-2"></td>
                <td class="px-6 py-2 text-center">Comment</td>
                <td class="px-6 py-2" colspan="4">{{ item.comment }}</td>
            </tr>
        </template>
    </tbody>
</table>

初步尝试的el-table代码 #

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="no" label="No"></el-table-column>
  <el-table-column prop="type" label="Type"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="status" label="Status"></el-table-column>
  <el-table-column prop="processDate" label="Process Date"></el-table-column>
  <el-table-column prop="comment" label="Comment"></el-table-column>
</el-table>

解决方案 #

要实现原生表格的评论行效果，需要对数据源做处理，并结合Element Plus的单元格合并和插槽功能来实现：

步骤1：处理数据源 #

将原始数据转换为包含数据行和评论行的数组，通过rowType字段区分行类型：

import { ref, computed } from 'vue';

const tableData = ref([
    // 你的原始数据
]);

// 处理后的数据，每条数据行后添加对应的评论行（如果有comment）
const processedTableData = computed(() => {
  const result = [];
  tableData.value.forEach(item => {
    // 添加数据行
    result.push({ ...item, rowType: 'data' });
    // 如果有评论，添加评论行
    if (item.comment) {
      result.push({
        rowType: 'comment',
        comment: item.comment,
        no: '',
        type: 'Comment', // 对应原生表格里的Comment文本
        name: '',
        status: '',
        processDate: ''
      });
    }
  });
  return result;
});

步骤2：实现单元格合并逻辑 #

定义合并规则，让评论行的后三列（Name、Status、Process Date）合并成一列：

const objectSpanMethod = ({ row, columnIndex }) => {
  if (row.rowType === 'comment') {
    switch (columnIndex) {
      case 0: // No列
        return { rowspan: 1, colspan: 1 };
      case 1: // Type列
        return { rowspan: 1, colspan: 1 };
      case 2: // Name列，合并后三列
        return { rowspan: 1, colspan: 3 };
      default: // 其他列不显示
        return { rowspan: 0, colspan: 0 };
    }
  }
};

步骤3：自定义行样式和内容渲染 #

给评论行添加自定义样式，在Name列的插槽中渲染评论内容：

// 自定义行类名
const getRowClassName = ({ row }) => {
  return row.rowType === 'comment' ? 'content-cmt bg-gray-100' : 'content-info text-center';
};

最终的el-table代码 #

<el-table 
  :data="processedTableData" 
  style="width: 100%" 
  :span-method="objectSpanMethod"
  :row-class-name="getRowClassName"
>
  <el-table-column prop="no" label="No"></el-table-column>
  <el-table-column prop="type" label="Type"></el-table-column>
  <el-table-column label="Name">
    <template #default="{ row }">
      <!-- 评论行显示评论内容，数据行显示原name字段 -->
      <span v-if="row.rowType === 'comment'">{{ row.comment }}</span>
      <span v-else>{{ row.name }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="status" label="Status"></el-table-column>
  <el-table-column prop="processDate" label="Process Date"></el-table-column>
</el-table>

这样就能实现和原生表格完全一致的评论行展示效果了。

内容的提问来源于stack exchange，提问作者Bảo