bootstrap-vue 相关问题

如何让 JS fetch 函数按照 Flask 发送的顺序从 Flask API 接收 json/数据？

如何让 JS fetch 按照 Flask 发送的顺序从 Flask API 接收 json/数据？ 烧瓶API： @api_bp.route("/用户") 定义用户（）： all_users = User.query.all() 数据 = lis...

Bootstrap-vue 分页正在从数组中删除项目

我正在尝试使用 Bootstrap-vue 分页组件，但它不起作用。我查阅了文档并尝试使用他们的示例： 我正在尝试使用 Bootstrap-vue 分页组件，但它不起作用。我查看了文档并尝试使用他们的示例： <template> <div class="overflow-auto"> <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table" ></b-pagination> <p class="mt-3">Current Page: {{ currentPage }}</p> <b-table id="my-table" :items="items" :per-page="perPage" :current-page="currentPage" small ></b-table> </div> </template> <script> export default { data() { return { perPage: 3, currentPage: 1, items: [ { id: 1, first_name: 'Fred', last_name: 'Flintstone' }, { id: 2, first_name: 'Wilma', last_name: 'Flintstone' }, { id: 3, first_name: 'Barney', last_name: 'Rubble' }, { id: 4, first_name: 'Betty', last_name: 'Rubble' }, { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' }, { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' }, { id: 7, first_name: 'The Great', last_name: 'Gazzoo' }, { id: 8, first_name: 'Rockhead', last_name: 'Slate' }, { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' } ] } }, computed: { rows() { return this.items.length } } } </script> 这正在发生： 我刚刚复制了文档示例，但它不起作用。我的项目使用 Vue 3.3.4 和 bootstrap-vue-3 (^0.5.1) 我有同样的问题，但没有找到任何答案。请帮忙！

Vue ref 更改不会在更新后将更改应用到组件

我有一个用vue3实现的表单。该表单由三个文本输入和一个复选框组组成。 我正在使用 bootstrap-vue 表单，它是复选框组。 我调用 api 来设置默认值...

有没有办法将引导复选框组的默认值设置为true？

我有一个复选框组，其中包含绑定到数组的 21 个复选框。 目前默认情况下它们都是未选中的，但我希望将它们全部选中。 查看文档，它

Bootstrap Vue 更改 b-table 中每个单元格的背景

我正在使用 bootstrap vue b-table 来显示我的项目： 我正在使用 bootstrap vue b-table 来显示我的项目： <b-table striped bordered :tbody-tr-class="row_class" :fields="fields" :items="items" head-variant="light" class="o-list" thead-class="o-gradient-header" @row-selected="onRowSelected" selectable no-local-sorting @sort-changed="change_sort" :sort-by="list_options.sort" :sort-desc="list_options.order==='desc'"> ... </b-table> 我想根据函数调用更改每个单元格的背景颜色： row_class(item) { // Insert conditionals // return CSS class string } 但这正在改变整行的样式。我不想那样。我只想改变单元格的样式？有没有办法改变每个单元格的背景颜色？ 您可以使用 tbody-tr-class 属性 设置每一行的样式 <b-table striped hover caption-top :items="items" :fields="fields" :tbody-tr-class="rowClass" > </b-table> 脚本 new Vue({ el: "#app", data() { return { fields: [ { key: "name", label: "Name", sortable: true }, { key: "email", label: "Email", sortable: true }, { key: "age", label: "Old", sortable: true } ], items: [ { age: 40, name: "admin1", email: "[email protected]" }, { age: 21, name: "admin2", email: "[email protected]" }, { age: 89, name: "admin3", email: "[email protected]" }, { age: 38, name: "admin4", email: "[email protected]" } ] }; }, methods: { rowClass(item, type) { if (!item || type !== 'row') return if (item.age > 30) return 'table-success' } } }); 您找到解决方案了吗？我也在纠结这个问题

计算元素高度的最佳方法是什么

我将 Bootstrap Vue 表格与 Vue v2 结合使用，目前使用 prop (sticky-header="600px") 来设置表格高度： 我将 Bootstrap Vue table 与 Vue v2 结合使用，目前使用 prop (sticky-header="600px") 来设置表格高度： <page-wrapper> <page-header> </page-header> <div class="content"> <b-card> <b-row> <b-col></b-col> <b-col> <b-form-group> <b-form-radio-group></b-form-radio-group> </b-form-group> </b-col> <b-col></b-col> </b-row> <div class="table-responsive"> <b-table-simple class="text-left border-left multiple-headers" small sticky-header="600px" bordered no-border-collapse> <b-thead head-variant="light"> <b-tr> <b-th></b-th> </b-tr> <b-tr> <b-th></b-th> </b-tr> </b-thead> <b-tbody> <b-tr> <b-td> </b-td> </b-tr> </b-tbody> </b-table-simple> </div> </b-overlay> </b-card> </div> </page-wrapper> 但是对于更大的屏幕来说它看起来不太好，因为底部有很多间距，这就是为什么我想将桌子高度设置为与屏幕高度相关。测量所有屏幕尺寸的表格主体外部（向上和向下）应有多少空间，然后使用 calc(100vh - XXpx) 的最佳方法是什么？ 在您的组件中，您可以使用 JS 根据屏幕高度和您想要计算的任何额外空间来计算高度，并为 .table-container 添加样式以确保它采用完整的计算高度。 .table-container { height: 100%; overflow: auto; /* Add this if you want scrolling when the content is too large */ } <template> <!-- ... your existing template ... --> <div class="table-container"> <b-table-simple class="text-left border-left multiple-headers" small :sticky-header="dynamicTableHeight" bordered no-border-collapse > <!-- ... your table content ... --> </b-table-simple> </div> </template> <script> export default { data() { return { additionalSpace: 100, // Adjust this value based on your design }; }, computed: { dynamicTableHeight() { // Calculate the dynamic height based on screen height const screenHeight = window.innerHeight || document.documentElement.clientHeight; return `calc(${screenHeight}px - ${this.additionalSpace}px)`; }, }, }; </script> 通过这样做，每当调整窗口大小时，表格都会根据屏幕高度呈现动态高度，并且 dynamicTableHeight 属性将相应更新。根据您喜欢的设计，更改 additionalSpace 值。如果表格内容超出估计高度，可以使用 overflow: auto; CSS 规则添加滚动条。这是可选的。

BootstrapVue 表粘性标题（CoreUI）

我正在使用 coreUI，我有一个设置数据表的视图。我想让头部粘在上面，但我所做的似乎都不起作用。 Thead 由两行 (tr) 组成。一行包含名称...

Bootstrap Vue - 如何将表单radio更改为50%

我使用 Bootstrap-vue，并尝试将 b-form-radio-group 的标签设置为移动设备的 50%。我有以下代码结构： 我使用 Bootstrap-vue 并尝试将 b-form-radio-group 的移动标签设置为 50%。我有以下代码结构： <b-col cols="12" sm="auto" class="text-center"> <b-form-group> <b-form-radio-group button-variant="outline-primary" buttons class="w-100" ></b-form-radio-group> </b-form-group> </b-col> 目前我看到这样的单选按钮： 如何将单选按钮的宽度更改为每个 50%，并像这样查看它们（如果可以，无需 CSS 样式）： <b-col cols="12" class="text-center"> <b-form-group> <b-form-radio-group button-variant="outline-primary" buttons class="w-100" ></b-form-radio-group> </b-form-group> </b-col> 删除 b-col 内的 sm="auto"

VueJS Bootstrap <date-picker> 隐藏在<b-table> 行

我正在使用 VueJS (v2.6.10) 和 boostrap-vue (v2.0) 并尝试允许用户使用 vue-bootstrap-datetimepicker (v5.0.1) 在 中输入记录的日期时间。 问题是...

Vue Bootstrap - 工具提示不适用于动态渲染的 HTML

我有一个列表组，其列表项是通过 API 调用呈现的。 例如， { “菜单ID”：“1”， "名称": "帮助", ...

Vue Js 数据不会在计算生成的元素内更新

我在我的项目中使用了引导表。这些字段是在计算时填充的，例如 ... 计算：...

Vue b-modal @close 看起来不起作用

以下是我的b-modal代码： 以下是我的b-modal代码： <b-modal centered id="modal-center" title="product regist" body-class="p-0 m-0" size="col-md-6 col-sm-6" ok-title="regist" cancel-title="cancel" @ok="registerProduct" @cancel="cancelRegister" @close="cancelRegister" > ... </b-modal> cancelRegister方法将初始化（例如日期或类别） 当我单击模式中的 cancel 按钮时，该方法将被触发并正常工作。但是当我关闭模式时（例如单击另一部分单击），它不起作用。 我在bootstrap-vue文档中找到了一些信息，但找不到与此错误相关的任何内容。 我们可能还需要考虑另外两项行动： “Esc键” 和 「背景」 “backdrop”是“单击另一部分单击”，esc 表示按键盘上的“esc”。 所以我们可以添加 @esc="取消注册" @backdrop="取消注册" 请参考https://bootstrap-vue.org/docs/components/modal

引导组按钮和文本，但它们之间有空格

您好，我希望文本和按钮必须在一行上，而不是在彼此下面。首先我这样做了 您好，我希望文本和按钮必须在一行上，而不是在彼此下面。首先我用做了这个 <div class="btn-group" role="group" aria-label="Basic example"><p>Document2.pdf</p><button type="button" class="btn btn-primary">Download</button></div><br> 但这会使按钮和文本彼此相邻，没有间距。因此，我使用了 btn-toolbar 而不是 btn-group，但这将项目放在彼此下面。 <div class="btn-toolbar" role="group" aria-label="Basic example"><p>Document1.pdf</p><br><button type="button" class="btn btn-primary">Download</button></div><br> 我尝试添加 flex-wrap: nowrap 但这不起作用。有谁知道如何解决这个问题并正确对齐它们？ 只需添加margin-right。 选项 1（推荐）：使用 Bootstrap 类（例如，me-3） 请参阅下面的片段。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="btn-group" role="group" aria-label="Basic example"> <p class="me-3">Document2.pdf</p><button type="button" class="btn btn-primary">Download</button> </div> 选项 2：使用 CSS 请参阅下面的片段。 p { margin-right: 16px; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="btn-group" role="group" aria-label="Basic example"> <p>Document2.pdf</p><button type="button" class="btn btn-primary">Download</button> </div>

vue 和 vite 项目上 bootstrap 5 导入错误

这是我在终端上遇到的错误 弃用警告：不推荐将百分比单位传递给全局 abs() 函数。 将来，这将发出一个 CSS abs() 函数来解析...

Vue bootstrap-vue安装后抛出错误

我正在尝试将 bootstrap Vue 添加到新项目中，安装后，它显示此错误，是否有解决办法？ 编译失败，出现 1 个错误 11:44:32 错误 ./src/App.vue?vue&type=

在vuejs3项目中使用bootstrap-vue没有编译成功

我正在做一个使用 bootstrap-vue 的 vue3 应用程序。我使用 vue create 创建了一个 vuejs3 项目，然后使用 npm install bootstrap-vue@latest 安装了 boostrap-vue 。我从

如何设置main.js文件将Bootstrap-vue添加到Vuex项目中？

我用 vue/vuex 开始了一个项目，并尝试向其中添加 Bootstrap-vue。 如何组织合并两个片段的 main.js 文件 - 从'vue'导入{createApp} 从 './App.vue' 导入应用程序 进口...

隐藏 B-Modal 组件，直到子组件返回值中的 API 调用

在 Vue 中，我有一个像这样的模型视图组件。 代码 在 Vue 中，我有一个像这样的模型视图组件。 代码 <template> <b-modal ref="modalDialog" class="-modal" scrollable hide-footer :title="title" :visible="visible" > <my-second-component ref="valueEditor" :some-values:some-values @no-values="hideDialog" /> </b-modal> </template> <script> import MySecondComponent from ... export default { name: 'MyFirstComponent', components: { MySecondComponent }, ..... </script> 在我的第二个组件中我有 mounted () { this.getValues() }, async getValues () { try { const args = { ... } const response = await this.$api.some(args) this.Values = response.count ? response.results : [] // Close dialog if none found if (!this.values.length) { this.$emit('no-values') } ... } catch (e) { this.onError(e) } }, 因此，当模态窗口打开时，它会呈现第二个组件，并且该组件从 API 获取数据 - 如果没有，它会关闭模态窗口并发出 no-values 问题： 如果没有从 API 返回值，模态窗口将闪烁。它打开然后迅速关闭。这让我们的客户很烦。 所以我的问题是如何“隐藏”b-modal 窗口（但仍然启动该过程），以至于第二个组件不会返回是否有任何值。 条件： Second组件在大型项目的多个地方使用。除非默认实现相同，否则行为不应更改，实现也不应更改。 第一个组件不应该是静态的。有一些属性传递给第二个组件。如果我将第一个组件设置为静态，那么这些属性将在挂载时设置（并且未定义）并且在需要时不会更改。

当我尝试在 vuejs 应用程序中使用 bootstrap-vue 时出现此错误，如何解决此问题

这是main.js文件 从'vue'导入{createApp} 从 './App.vue' 导入应用程序 从 'bootstrap-vue' 导入 BootstrapVue 导入 'bootstrap/dist/css/bootstrap.css' 导入 'bootstrap-vue/dist/

我已经在 vueCLI 中安装并导入了 Bootstrap，但是它没有运行并且错误 cannot read properties of undefined (reading 'version') gives

这就是我在 app.vue 中使用 bootstrap 的方式 启动演示模式 这就是我在 app.vue 中使用 bootstrap 的方式 <template> <div> <b-button v-b-modal.modal-1>Launch demo modal</b-button> <b-modal id="modal-1" title="BootstrapVue"> <p class="my-4">Hello from modal!</p> </b-modal> </div> </template> <script> import { BModal } from 'bootstrap-vue' export default { name: 'App', components: { BModal, }, } </script> 在 main.js 中，我导入了这样的引导程序 import { createApp } from 'vue' import App from './App.vue' import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap-vue/dist/bootstrap-vue.css'; const app = createApp(App); app.mount('#app'); 在 package.json 中也添加了 Bootstrap 依赖 "dependencies": { "@vue/compat": "^3.2.47", "bootstrap-vue": "^2.23.1", "core-js": "^3.8.3", "vue": "^3.2.13" },