如何在Bootstrap-Vue b表中使用行跨度?

mdfafbf1  于 2023-02-16  发布在  Vue.js
关注(0)|答案(2)|浏览(116)

代码和框:https://codesandbox.io/s/bootstrap-vue-forked-cei72?file=/src/App.vue

我在我的项目中使用Bootstrap-Vue。
我有一个问题,我需要一个像下面的图像表布局。

b-表格-简单布局

我可以在b-table-simple中创建它,但是因为表需要排序功能,所以我想创建相同的
B表中的表布局。
我在这里进货很久了,怎么做呢?

ozxc1zmp

ozxc1zmp1#

我认为您可以为此使用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>
9fkzdhlc

9fkzdhlc2#

另一种方法是使用tbody-tr-class来传递一个函数(例如:tbody-tr-class=“rowClass”,然后您可以根据数据来决定是否应用一个类。我使用此函数来删除边框、为总计添加粗体以及增加行之间的边框。

<style lang="scss">
    .tbl-big-border {
        border-top-color: black;
        border-top-style: solid;
    }
    .tbl-noborder {
        &>td:nth-child(1) {
            border-top: none;
        }
    }
    .tbl-totnoborder {
        font-weight: bold;
        &>td:nth-child(1) {
            border-top: none;
        }
    }
</style>

然后在row类函数中你可以做这样的事情:

rowClass (item, type) {
    if (!item || type !== 'row') return
    if (item.id) return 'tbl-border'
    return (item.isTot) ? 'totnoborder' : 'tbl-noborder'
}

此方法允许应用基于数据的类。

相关问题