Bootstrap Vue：b表上的自定义边框列样式和自定义边框行样式

Question

我希望有以下行为：

1. 表格中间的边框，将表格分成两部分
2. 我想逐项对行进行“分组”，这意味着我想要在项目更改时进行可见的分隔

对于1，没问题

<b-table :fields="fields"
           :items="incoherences"
           :tbody-tr-class="rowClass"
  ></b-table>

    // (computed property)
    get fields() {
      if (this.incoherences.length === 0) return null
      const fields = Object.keys(this.incoherences[0])
      return fields.map(field => {
        if (field === 'devis2') {
          return {
            key: field,
            tdClass: 'with-left-border',
            thClass: 'with-left-border',
          }
        } else {
          return field
        }
      })
    }

我们看不太清楚，但 Date Fin1 和 Devis2 列之间存在垂直边框。每行之间也有一个边框。

在图像中，我想在底部项目 14 有一个边框（将它们组合在一起），然后将 15, 16, 17,... 单独分组。所以我做了这个代码

    lastItemIdBrowser = 0
    // (method)
    rowClass(item: Incoherence, type: any) {
      let ret = false
      if (!item || type !== 'row') return
      if (item.item1 !== this.lastItemIdBrowser && this.lastItemIdBrowser !== 0) ret = true
      this.lastItemIdBrowser = item.item1
      if (ret) return 'with-top-border'
    }

但它没有效果。为了看到预期的效果，我必须给表格 borderless 道具，但后来我失去了所有其他边框：

<b-table :fields="fields"
           :items="incoherences"
           :tbody-tr-class="rowClass"
           borderless
  ></b-table>

有人知道如何在不丢失其他功能的情况下结合这些功能吗？

Answer 1

您面临的问题是因为您看到的边框实际上并未应用于tr，而是应用于表格中的td。

所以你需要编辑你的 CSS 来定位行内的td。

.with-top-border > td {
  border-top: 2px solid black !important;
}

---

new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        'age',
        'first_name',
        'last_name',
        { key: 'active', tdClass: 'border border-primary' }
      ],
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', active: false },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw', active: false },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson', active: true },
        { age: 38, first_name: 'Jami', last_name: 'Carney', active: false },
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', active: true },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw', active: true },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson', active: true },
        { age: 38, first_name: 'Jami', last_name: 'Carney', active: false }
      ]
    }
  },
  methods: {
    setTbodyTrClass(item) {
      const classes = [];
      if(item.active) classes.push('custom-border');
      return classes;
    }
  }
  })

.custom-border > td {
  border-top: 3px solid green !important;
}

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table :items="items" :tbody-tr-class="setTbodyTrClass"></b-table>
</div>