是否可以将bootstrap-vue table的列用一条竖线分成两组？

Question

我想用这样的垂直线划分 bootstrap-vue table：

从 documentation 看来，使用 bordered 或 borderless 的道具，似乎只能在所有列之间有边框，或者根本没有垂直边框<b-table>.

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

Answer 1

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

常规 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;
}

是否可以将bootstrap-vue table的列用一条竖线分成两组？

Is it possible to divide the columns of a bootstrap-vue table into two groups by a vertical line?

bootstrap-vue