如何使用bootstrap-vue b表在单个<td>内开始新行

Question

我正在尝试使用vue.js作为前端和CSS样式的bootstrap-vue创建表。 生成的表html应该类似于：

<table>
  <tr><td>item_1_1<br/>item_1_2<br/>item_1_3</td><td>item_1_4<br/>item_1_5</td></tr>
  <tr><td>item_2_1<br/>item_2_2</td><td>item_2_3</td></tr>
</table>

如您所见，在每个td标签内，可以有多个项目。每个项目都占一行。并且项目数量不是固定的。
在bootstrap-vue中，有一个b表组件：

<b-table :items="items"></b-table>

它将数据绑定到项目：

data() {
      return {
        items: [
          { r1c1: 40, r1c2: 'Dickerson', r1c3: 'Macdonald' },
          { r2c1: 21, r2c2: 'Larsen', r2c3: 'Shaw' }
        ]
      }
    }

项目中的每个单个元素在b表中都占据一个单元格。
我的问题是如何在此处为单个项目添加新行，例如是否要让r1c1像：40<br/>20。我尝试添加“ \ n”，但最终在网页中添加了空格。请帮助，非常感谢。