如何用Vuetify v-data-table将两行数据合并为一行堆叠显示？

Hey there! Let's sort out this issue with your v-data-table column display. First, I notice a small problem in your data structure—you've got duplicate column2 keys in the same object, which isn't valid JavaScript. I'll fix that first, then show you how to get the stacked layout you want.

Step 1: Fix Your Data Structure #

First, let's correct the pendingApprovals array so it has valid syntax. I'm assuming you meant to have a single column2 array containing both change objects:

this.pendingApprovals = [
  {
    id: 1,
    column2: [
      { oldValue: 'Company 1', newValue: 'Company ABC' },
      { oldValue: 'Test1', newValue: 'Test2' }
    ]
  }
];

Step 2: Adjust the Column Slot for Stacked Layout #

The reason your content is displaying side-by-side right now is because you're using <td> elements in your loop—table cells are designed to sit next to each other in a row. Instead, use block-level elements (like <div> or <p>) and style them to stack vertically.

Here's a working template example:

<v-data-table :items="pendingApprovals" :headers="yourHeadersArray">
  <!-- Custom slot for column2 -->
  <template v-slot:item.column2="{ item }">
    <div class="stacked-column-content">
      <!-- Loop through each change in column2 -->
      <div v-for="(change, index) in item.column2" :key="index" class="change-entry">
        <p>Old Value: {{ change.oldValue }}</p>
        <p>New Value: {{ change.newValue }}</p>
      </div>
    </div>
  </template>
</v-data-table>

<!-- Add scoped styles for better spacing -->
<style scoped>
.stacked-column-content {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Space between each change entry */
}

.change-entry p {
  margin: 4px 0; /* Reduce default paragraph margins for tighter stacking */
}
</style>

How This Works: #

• We replace the <td> elements with <div> and <p> which are block-level, so they automatically stack vertically by default.
• The flex-direction: column on the wrapper ensures everything stays stacked, and the gap property adds clean spacing between entries.
• The scoped styles help fine-tune the spacing so the content looks polished instead of cramped.

If you want to make the old/new values even more distinct, you could add some text formatting:

<p><strong>Old:</strong> {{ change.oldValue }}</p>
<p><em>New:</em> {{ change.newValue }}</p>

That should give you the vertical stacked layout you're looking for!

内容的提问来源于stack exchange，提问作者tesla_coil