Vue中用无影响元素包裹多元素及表格可展开行动态实现问题

Got it, let's break down how to replicate that static expandable table structure in Vue without adding extra wrapper elements that mess up your DOM. The key here is using Vue's <template> tag—it's a renderless wrapper that lets you loop over multiple elements without generating extra HTML, which fits exactly what you need.

Step 1: Structure Your Data First #

First, organize your table data into a grouped structure so each parent row has its corresponding child rows. Add an isExpanded flag to control the expand/collapse state:

data() {
  return {
    tableGroups: [
      {
        isExpanded: false,
        headerData: { id: 1, title: "Parent Row 1" },
        childRows: [
          { id: 101, content: "Child Row 1-1" },
          { id: 102, content: "Child Row 1-2" }
        ]
      },
      {
        isExpanded: false,
        headerData: { id: 2, title: "Parent Row 2" },
        childRows: [
          { id: 201, content: "Child Row 2-1" }
        ]
      }
      // Add more groups as needed
    ]
  };
}

Step 2: Render with <template> for Wrapper-Free Looping #

Use <template v-for> to loop through each group, then render the two <tbody> elements (parent header and child rows) inside it. This keeps your DOM structure identical to the static version:

<template>
  <table>
    <!-- Loop through each table group -->
    <template v-for="(group, index) in tableGroups" :key="group.headerData.id">
      <!-- Parent row tbody (clickable to toggle expand) -->
      <tbody 
        class="js-table-sections-header"
        @click="group.isExpanded = !group.isExpanded"
        style="cursor: pointer;"
      >
        <tr>
          <td colspan="*">{{ group.headerData.title }}</td>
        </tr>
      </tbody>

      <!-- Child rows tbody (only visible when expanded) -->
      <tbody v-show="group.isExpanded">
        <tr v-for="row in group.childRows" :key="row.id">
          <td>{{ row.content }}</td>
        </tr>
      </tbody>
    </template>
  </table>
</template>

Step 3: Keep Your Existing Logic Intact #

Since we're preserving the exact <tbody> structure from your static code, any existing CSS or vanilla JS that targets .js-table-sections-header or adjacent <tbody> elements will work just like before. The only difference is we're dynamically generating them with Vue.

Bonus: If You Need to Use Vanilla JS Toggle Logic #

If you prefer to keep your original click handler (instead of Vue's reactive flag), you can still use the <template> loop and bind a ref or data attribute to control visibility—just make sure the DOM structure stays the same:

<template v-for="(group, index) in tableGroups" :key="group.headerData.id">
  <tbody 
    class="js-table-sections-header"
    :data-group-index="index"
  >
    <tr>
      <td colspan="*">{{ group.headerData.title }}</td>
    </tr>
  </tbody>
  <tbody class="table-sections-content" :data-group-index="index">
    <!-- Child rows -->
  </tbody>
</template>

Then your existing JS can target the adjacent .table-sections-content based on the data attribute, just like it did with static HTML.

This approach ensures you don't introduce any extra DOM elements that could break your existing styling or functionality, while fully leveraging Vue's dynamic rendering capabilities.

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