如何在bootstrap vue中的b-table中将一列划分为多行？

Question

我正在使用 vue 创建 SPA。我有 JSON 个数组：

[
    {
        date: new Date(2076, 5, 10),
        customer: {id: 0,name: "Foo bar",tol: "Some tol",city: "Some City",},
        items: [
            {code: "gs",name: "Generic Shoes",cost: 500,quantity: 5},
            {code: "nf",name: "North Facing Jacket",cost: 5000,quantity: 5},
            {code: "lp",name: "Lee Vice Jeans Pant",cost: 1500,quantity: 15}
        ],
    }
]

现在包含一个主要包含日期、客户和项目的对象。我想让 table 包含日期、客户和项目作为字段，并且 table 的每一行都包含多行项目。像这样：

,

这个东西只有一排，但正如你想象的那样，多个 {date, customer, items[]}.

可能会有多排

这是我能做的最好的事情了：

<b-container>
    <b-table responsive="true" striped hover :items="DraftList" :fields="fields">
        <template slot="[date]" slot-scope="data">{{data.value|formatDate}}</template>
        <template slot="[customer]" slot-scope="data">{{data.value.name}}</template>
        <template slot="[items]" slot-scope="data">{{data.value}}</template>
    </b-table>
</b-container>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      fields: [
        { key: "date", sortable: true },
        {
          key: "customer",
          label: "Customer's Name",
          sortable: true
        },
        {
          key: "items",
          label: "Item List",
          sortable: true
        }
      ]
    };
  },
  computed: {
    ...mapState(["DraftList"])
  },
  mounted() {},
  filters: {
    formatDate: date => {
      if (date instanceof Date) {
        let month = "" + (date.getMonth() + 1);
        let day = "" + date.getDate();
        let year = date.getFullYear();
        if (month.length < 2) month = "0" + month;
        if (day.length < 2) day = "0" + day;
        return [year, month, day].join("-");
      }
      return null;
    }
  }
};
</script>

我卡住了，我现在该怎么办？我也无法正确地为我的搜索命名。

Answer 1

使用 v-for 和 rowspan 解决了它

<b-table-simple responsive="true" hover outlined>
    <colgroup>
        <col />
        <col />
    </colgroup>
    <colgroup>
        <col />
        <col />
        <col />
    </colgroup>
    <colgroup>
        <col />
        <col />
    </colgroup>
    <b-thead head-variant="light">
        <b-tr>
            <b-th rowspan="2">Date</b-th>
            <b-th rowspan="2">Customer's Name</b-th>
            <b-th colspan="4">Items</b-th>
        </b-tr>
        <b-tr>
            <b-th>code</b-th>
            <b-th>Name</b-th>
            <b-th>Cost</b-th>
            <b-th>Quantity</b-th>
        </b-tr>
    </b-thead>
    <b-tbody v-for="(draft,index) in DraftList" :key="index">
        <b-tr>
            <b-td :rowspan="draft.items.length+1">{{draft.date|formatDate}}</b-td>
            <b-td :rowspan="draft.items.length+1">{{draft.customer.name}}</b-td>
        </b-tr>
        <b-tr v-for="(item, itemIndex) in draft.items" :key="itemIndex">
            <b-td>{{item.code}}</b-td>
            <b-td>{{item.name}}</b-td>
            <b-td>{{item.cost}}</b-td>
            <b-td>{{item.quantity}}</b-td>
        </b-tr>
    </b-tbody>
</b-table-simple>

如何在bootstrap vue中的b-table中将一列划分为多行？

How to divide a column to have multiple rows in b-table in bootstrap vue?

vue-cli

bootstrap-vue