是否可以通过垂直线将bootstrap-vue表的列分为两组？

Question

我想用这样的垂直线划分引导表：

从documentation看来，使用{{的bordered或borderless道具，可能只有所有列之间都没有边框，或者根本没有垂直边框。 1}}。

这是bootstrap-vue的固有限制吗？

Answer 1

您需要创建一个自定义类以应用于列单元格。

常规CSS：

.b-table .my-left-border {
  border-left: 3px solid #000;
}

，或者如果使用范围样式

.b-table /deep/ .my-left-border {
  border-left: 3px solid #000;
}

然后在字段定义中执行以下操作：

export default {
  // ...
  data() {
    return {
      fields: [
        'age',
        'first_name',
        {
          key: 'last_name',
          class: 'my-left-border'
        }
      ],
      // ...
    }
  },
  // ...
}

<b-table :fields="fields" ... ></b-table>

另一个选择是使用CSS选择器：

.b-table /deep/ > thead > tr :nth-child(3),
.b-table /deep/ > tbody > tr :nth-child(3),
.b-table /deep/ > tfoot > tr :nth-child(3) {
  border-left: 3px solid #000;
}