自定义UI B表Vuejs

Question

我正在练习自定义b表的界面，但没有找到解决方案。请帮忙。

我正在Bootstrap 3和Vuejs上构建它

我尝试在此处进行跟进，但仍未成功： https://bootstrap-vue.js.org/docs/components/table/#adding-additional-rows-to-the-header

这是我的代码：

<b-table
                  striped
                  hover
                  :items="items"
                  :fields="fields"
                  responsive="sm"
                >
                <template slot="thead-top">
                  <tr>
                    <th>User</th>
                    <th colspan="1">Privilege</th>
                  </tr>
                </template>
                <template slot="privilege" slot-scope="row">
                  <div style="display: flex; flex-direction: row">
                    <b-form-checkbox class="col-md-3 col-lg-3" v-model="row.privilege" ></b-form-checkbox>
                  </div>
                </template>
                </b-table>

items: [
        { user: "User 1", privilege: 'Dickerson' },
        { user: "User 2", privilege: 'Dickerson 1' }
      ],
      fields: [
          {
            key: 'user',
            sortable: true,
          },
          {
            key: 'privilege',
          },
      ],

This is the result I expected.