VueJs项目b-table内b-button按钮无法显示问题求解

问题根因 #

• Vue版本与插槽语法不兼容：当前引入的Vue版本为2.5.21，代码中使用的#cell(actions)是Vue 2.6.0才支持的v-slot简写语法，2.5.x版本无法解析该插槽，导致自定义列的按钮完全不渲染。
• 缺失必要样式依赖：代码仅引入了BootstrapVue的JS文件，未引入Bootstrap核心CSS和BootstrapVue自身的CSS文件，会导致组件渲染异常、样式错乱。
• 现有fields字段配置无语法错误，不需要调整。
• 代码中<br></br>写法不规范，br为单标签，直接写<br>即可，不影响核心功能但建议修正。

修复方案 #

二选一即可：

方案1：升级Vue版本（推荐） #

1. 在页面head区域、所有JS脚本引入前，补全CSS依赖：

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.min.css">

2. 将原有Vue的CDN引入替换为2.6及以上的2.x稳定版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

替换完成后原有#cell(actions)的插槽写法可正常生效，按钮会正常渲染。

方案2：保留现有Vue版本，替换为兼容插槽写法 #

如果暂时无法升级Vue版本，补全上述CSS依赖后，将插槽替换为Vue 2.5兼容的旧版作用域插槽写法即可：

<template slot="cell(actions)" slot-scope="data">
    <b-button size="sm" variant="primary" @click="getLocales()"> Editar </b-button>
    <b-button size="sm" variant="danger" href="{% url 'newLocal' %}"> Eliminar </b-button>
</template>

验证提示 #

• 修复后清空浏览器缓存再刷新页面，避免旧资源缓存导致问题复现
• 确认getLocales方法已在Vue实例的methods选项中定义，避免点击编辑按钮时报错

内容的提问来源于stack exchange，提问作者ASIER SALUEÑA SEDILES