VueJS中如何遍历含数组的动态对象并渲染为DataTable

Got it, let's tackle this problem step by step. Since your object's properties are dynamic (you don't know name, age, etc. ahead of time), we need a flexible approach to iterate over unknown keys and format each array into the table-like structure you want.

Step 1: Process the Dynamic Data #

First, we'll use Object.entries() to convert your dynamic object into an array of [key, value] pairs—this lets us access both the property name (like name) and its corresponding array without knowing the keys upfront. Then we'll split each array into groups of two elements (since your example shows pairs like 1 25, 2 24), and build a render-friendly structure that includes the pairs, property labels, and dividers.

Step 2: Vue Component Implementation #

Here's a complete Vue component that does exactly what you need:

<template>
  <div class="custom-data-table">
    <!-- Iterate over each dynamic property group -->
    <div v-for="(group, groupIdx) in formattedData" :key="groupIdx" class="property-section">
      <!-- Render each item in the group (pair, label, divider) -->
      <div v-for="(item, itemIdx) in group" :key="itemIdx">
        <!-- Render number pairs -->
        <div v-if="item.type === 'pair'" class="pair-row">
          <span v-for="(num, numIdx) in item.value" :key="numIdx" class="number">{{ num }}</span>
        </div>

        <!-- Render divider with property name -->
        <div v-else-if="item.type === 'label-divider'" class="label-divider">
          <span class="divider-line"></span>
          <span class="property-name">{{ item.value }}</span>
          <span class="divider-line"></span>
        </div>

        <!-- Render plain divider -->
        <div v-else-if="item.type === 'plain-divider'" class="plain-divider"></div>
      </div>

      <!-- Outer divider for each property section -->
      <div class="section-divider"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Object_return: { 
        name: [1,25,2,24,3,78], 
        age: [2,34,4,78] 
        // Add more dynamic properties here as needed
      }
    };
  },
  computed: {
    formattedData() {
      // Convert dynamic object to [key, array] pairs
      return Object.entries(this.Object_return).map(([propName, numArray]) => {
        // Split array into groups of 2 elements
        const pairs = [];
        for (let i = 0; i < numArray.length; i += 2) {
          pairs.push(numArray.slice(i, i + 2));
        }

        // Build the render structure: pair → label divider → pair → plain divider → ...
        const renderItems = [];
        pairs.forEach((pair, idx) => {
          renderItems.push({ type: 'pair', value: pair });
          
          // Add label divider after first pair, plain divider after subsequent pairs (except last)
          if (idx === 0) {
            renderItems.push({ type: 'label-divider', value: propName });
          } else if (idx < pairs.length - 1) {
            renderItems.push({ type: 'plain-divider' });
          }
        });

        return renderItems;
      });
    }
  }
};
</script>

<style scoped>
.custom-data-table {
  max-width: 500px;
  margin: 2rem auto;
  font-family: Arial, sans-serif;
}

.property-section {
  margin-bottom: 1rem;
}

.pair-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.5rem 0;
  font-size: 1.1rem;
}

.label-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.divider-line {
  flex: 1;
  height: 1px;
  background-color: #ccc;
}

.property-name {
  font-weight: bold;
  color: #333;
  font-size: 1rem;
}

.plain-divider {
  height: 1px;
  background-color: #ccc;
  margin: 0.25rem 0;
}

.section-divider {
  height: 2px;
  background-color: #666;
  margin: 1rem 0;
}
</style>

Key Details Explained #

• Object.entries(): This is the core of handling dynamic properties—it turns your unknown keys into iterable pairs.
• Array Grouping: The for loop splits each number array into chunks of two, so we can render each pair as a row.
• Render Structure: We build an array of items with different types (pair, label-divider, plain-divider) so the template can easily conditionally render each element.
• CSS Styling: The styles replicate the divider and layout structure you described, with flexible spacing to adapt to more data.

Edge Case Handling #

If any property's array has an odd number of elements (e.g., age: [2,34,4]), the code will still render the last single number without breaking—you can adjust the pair rendering logic if you want to handle this differently (like adding a placeholder).

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