Vue.js 使用项目和字段，列跨度为 2 的 Bootstrapvue 表

发布于07月10日

I am doing a project with using vuejs2 and bootstrap vue. I was asked to do the ui like this (just an idea of the ui):

我坚持的部分的解释，我想实现一个用户界面，有一个标题与列跨度2(如红色部分)和放置2个数据下的标题(如黄色部分)

从bootstrap vue的文档中，我知道我可以对布局进行硬编码，但是因为我必须连接到API，所以我希望(并且必须使用):Item和:字段来完成.就像这样:

<b-table
  bordered
  responsive
  class="mt-2"
  :fields="tableFields"
  :items="tableData"
>
  <!--
    how can I do the ui in here
  -->
</b-table>

我想问一下如何用b表实现用户界面？

推荐答案

对于此功能，需要使用scoped slots个.:items和:fields用于简单的表格渲染.您需要对布局进行更多的控制.

将b-table与VUE指令一起使用:

<template>
  <b-table responsive class="mt-2">
    <thead>
      <tr>
        <th colspan="2">Special Header</th>
        <!-- Other headers go here -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.field1 }}</td>
        <td>{{ item.field2 }}</td>
        <!-- Other cells go here -->
      </tr>
    </tbody>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        // Your data goes here
      ]
    }
  }
}
</script>

这样，您可以个性化地定制表格布局，并更改您需要的内容.

希望这能有所帮助！?