如何在 Bootstrap-Vue b-table 中使用行跨度？

Question

代码沙盒： https://codesandbox.io/s/bootstrap-vue-forked-cei72?file=/src/App.vue

我在我的项目中使用 Bootstrap-Vue。

我有一个问题，我需要如下图所示的表格布局。

b-table-简单布局

我可以在 b-table-simple 中制作，但是因为表格需要排序功能，所以我想制作相同的

b-table 中的表格布局。

我已经在这里囤货很长时间了。我怎样才能做到？

Answer 1

我认为您可以为此目的使用slot 并更改引导表的CSS。

new Vue({
  el: "#app",
  data: function() {
    return {
      fields: [{
          label: "name",
          key: "name",
        },
        {
          label: "stuff",
          key: "stuff",
        },
      ],
      items: [{
          id: 1234,
          name: "Ken",
          stuff: "A1",
          stuff2: "A2",
        },
        {
          id: 1235,
          name: "John",
          stuff: "B1",
          stuff2: "B2",
        },
        {
          id: 1236,
          name: "Merry",
          stuff: "C1",
          stuff2: "C2",
        },
      ],
    }
  },
});

.customTable>tbody>tr>td:nth-child(2) {
  padding: 0;
}

.customTable>tbody>tr>td:nth-child(2)>div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0;
}

.customTable>tbody>tr>td:nth-child(2)>div:nth-child(1) {
  border-bottom: 1px solid #dee2e6;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table class="customTable" :fields="fields" :items="items" bordered>
    <template #cell(name)="{ item }">
              <div>{{ item.name }}</div>
              <div>{{ item.id }}</div>
            </template>
    <template #cell(stuff)="{ item }">
                <div>{{ item.stuff }}</div>
              <div>{{ item.stuff2 }}</div>
            </template>
  </b-table>
</div>