vuejs中table根据选中行切换元素

Question

我遇到一个问题，我试图在 table 中使用 b-collapse，当我点击按钮时，它当前正在折叠 table 中的所有行。

这是它的代码：

<table class="table b-table border">
        <thead>
          <tr>
            <th class="table-btn"></th>
            <th>name</th>
            <th>last name</th>
            <th>address</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in items" :key="item.id">
            <td class="table-btn">
              <b-button v-b-toggle.collapse-1 variant="primary"
                >Toggle Collapse</b-button
              >
              <b-collapse id="collapse-1" class="mt-2">
                <b-card>
                  <p class="card-text">{{ item.id }}</p>
                </b-card>
              </b-collapse>
            </td>
            <td>{{ item.name }}</td>
            <td>{{ item.lastname }}</td>
            <td>{{ item.address }}</td>
          </tr>
        </tbody>
      </table>

脚本是：

  data() {
    return {
      items: [
        {
          id: 1,
          name: "John",
          lastname: "john@john.com",
          address: "test1",
        },
        {
          id: 2,
          name: "John2",
          lastname: "john2@john.com",
          address: "test2",
        },
      ],
    };
  },

如何让它仅在单击 table 的选定 td/row 时切换并显示详细信息。

这是我正在处理的示例：sample

请指教

Answer 1

它切换所有 b-collapse 组件，因为您正在使用 v-for 并且所有 b-collapse 组件具有相同的 id + 所有按钮都使用相同的 id在 v-b-toggle 指令中。

所以解决方案是为每一行分配不同的id...

<td class="table-btn">
  <b-button v-b-toggle="[`table_collapse_${idx}`]" variant="primary">Toggle Collapse</b-button>
  <b-collapse :id="`table_collapse_${idx}`" class="mt-2">
    <b-card>
      <p class="card-text">{{ item.id }}</p>
    </b-card>
  </b-collapse>
</td>

vuejs中table根据选中行切换元素

Toggle elements based on the selected row in the table in vuejs

vuejs2

bootstrap-vue