vue多列可展开的组件

Vue多列可展开的组件可以用来显示具有层次结构的数据，例如树形结构或表格等。在这种组件中，每行都可以展开为多个子行，以显示更详细的数据。以下是一个示例Vue多列可展开的组件的模板代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">{{ column.name }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows">
          <td v-for="column in columns">{{ row[column.field] }}</td>
          <td>
            <button @click="toggle(row)">
              {{ row.expanded ? 'Collapse' : 'Expand' }}
            </button>
          </td>
        </tr>
        <tr v-if="selectedRow">
          <td :colspan="columns.length">
            <div class="expanded-row">
              <div v-for="detail in selectedRow.details">
                {{ detail }}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

该组件使用一个数据数组来表示表格的行，每行都有一个`expanded`属性来表示它是否已展开以显示更详细的数据。当用户单击行旁边的展开/折叠按钮时，组件将切换该属性并显示或隐藏相应的子行。

此外，该组件还使用一个`selectedRow`属性来存储当前已展开的行，并在表格底部显示相关的详细信息。该信息可以通过`details`属性在行对象中进行配置。