bootstrap-vue b-table使用单元格模板时data prop未识别报错排查

代码存在3处错误，直接触发了data未定义的报错：

• 版本兼容问题：当前引入的Vue为2.5.17版本，#插槽名="插槽参数"这种v-slot简写的作用域插槽传参写法，是Vue 2.6.0版本才正式支持的语法，2.5.x版本无法识别该写法，会默认把data当作Vue实例上的属性/方法查找，自然抛出未定义错误。
• 插槽名与字段不匹配：b-table的列自定义插槽命名规则为#cell(对应字段的key值)，你写的#cell(name)对应的是key为name的列，但你定义的fields数组里只有age、first_name、last_name三个字段，没有key为name的列，插槽无法正确匹配。
• 插槽参数取值逻辑错误：cell插槽传出的参数对象中，value属性对应当前匹配列本身的字段值，整行数据需要通过item属性获取，就算插槽匹配正确，data.value.age也无法拿到预期的年龄值。

方案1：兼容新语法（推荐） #

1. 将项目使用的Vue版本升级至2.6.0及以上的2.x正式版本
2. 修正插槽名和内部取值逻辑，修改后的b-table代码如下：

<b-table striped small :items="items" :fields="fields">  
  <!-- 自定义age列的渲染内容 -->
  <template #cell(age)="data">
    <h3 class="text-info">The AGE IS: {{ data.value }}</h3>
    <!-- 如需获取同行其他字段，使用data.item.first_name、data.item.last_name格式调用即可 -->
  </template>
</b-table>

方案2：兼容旧版Vue 2.5.x #

如果暂时无法升级Vue版本，使用Vue 2.5支持的slot-scope旧语法书写作用域插槽即可，代码如下：

<b-table striped small :items="items" :fields="fields">  
  <template slot="cell(age)" slot-scope="data">
    <h3 class="text-info">The AGE IS: {{ data.value }}</h3>
  </template>
</b-table>

按上述方法修改后，自定义单元格即可正常渲染，不会再出现参数未定义的报错。

内容的提问来源于stack exchange，提问作者goodson