Vue.js B表插槽无法正确显示

Question

我的Vue-bootstrap表未正确呈现插槽。

如果我将Bootstrap-Vue网站的示例复制到我的Vue应用程序中，则不会显示广告位。该应用程序编译没有错误。 某些插槽（例如，桌子忙）可以正常工作，但其他插槽不能

<template>
<b-table
  :fields="tableHeaders"
  :items="tableRows"
  :busy="!tableLoaded"
>
  <template v-slot:cell()="data">
    <i>{{ data.value }}</i>
  </template>
</b-table>
</template>

<script>
export default {
  data() {
    tableHeaders: [
      {
        key: 'Employee',
        stickyColumn: true,
        isRowHeader: true,
        variant: 'primary',
      }, 
      'Status'
    ],
    tableRows: [
      Employee: 'Emp 1', status: 'Active',
      Employee: 'Emp 2', status: 'Active',
    ]
}
</script>

数据值不以斜体显示。编译器没有显示任何错误。有人知道如何解决吗？