bootstrap-vue 相关问题

将 B-Col 内的表格设为列的大小。 （Vue-Bootstrap）

我的 Vue 组件中有这个 < 我的 Vue 组件中有这个 <b-modal ...> <b-row> <b-col sm="12"> <table > <tr v-for=... :key="key"> <td><strong>{{ key }}: </strong></td> <td> {{ item }} </td> </tr> </table> </b-col> </b-row> .... 如果一个项目很长，那么表格就比b-col大 如何强制表格与 b-col 大小相同。 我不想只躲起来 overflow: hidden; 因为桌子还是太大了，只是隐藏了。 如果没有你的CSS，很难知道，但你可以做到这一点的一种方法是将你的table设置为使用table-layout: fixed。 您可以获得精美且溢出的文本。像下面这样的东西会让你的表格单元看起来很漂亮： td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

使用 v-for 引导 vueJS 表

所以在我的项目中我遇到了一个问题， 所以我想做的是，我在这个对象中有一个用户（对象）列表，我有一个属性 teamId（从 api 端点调用），我必须...

使用 schema 使 vue-form-generator 部分可折叠

我正在使用 vue-form-generator 库来创建表单。 问题是我的表单上有 116 个问题，我想折叠一些问题，使表单更易于用户管理。 我...

获取b表的上下文（排序值）

我想获取我的b表的上下文信息。 该表是从我的组件中调用的： 我想获取我的b表的上下文信息。 该表是像我的组件中那样调用的： <b-table ... :sticky-header="true" :responsive="true" striped ... > 我可以在 vue devtool 中看到，当我单击排序时，我的 b 表的“上下文”包含我需要的信息： 如何将这些信息获取到我的组件中？ 谢谢你 也许我不清楚，但我可以找到我想要的： 为了获取我的 b 表的上下文，我必须像这样实例化它： <b-table @context-changed="onContextChange($event)" > 并拥有这样的功能： onContextChange(event: any){ console.log(event) } 当我单击表格的排序箭头时，它会调用我的函数并向我显示排序的“上下文”：

Bootstrap-vue：当您将鼠标悬停在工具提示本身（而不是按钮）上时如何隐藏 v-b-tooltip

我的按钮彼此靠近，当工具提示弹出时，它会挡住其他按钮，这是上述问题的图片： 如果我将请求按钮悬停在另一个按钮下方...

Bootstrap-Vue 表未使用 table.refresh() 进行更新

我有一个表应该不断更改其数据。当在父组件中单击按钮时，会调用服务器，然后将 json 文件加载到子组件中（t...

如何重用 Bootstrap-Vue 重用项目提供程序功能来更新 b 表中的异步项目？

我正在使用 Bootstrap-Vue v2.0.0-rc.11，我只是不知道如何更新表格内容。我确信这是微不足道的。 我正在使用项目提供商从后端提取内容

如何更改nuxt中bootstrap 4中b表排序箭头的颜色？

我正在使用 nuxt 和 bootstrap，但表格中的默认排序箭头对于我的背景来说太暗了。 如何更改排序箭头的颜色？ 我正在使用 nuxt 和 bootstrap，但表格中的默认排序箭头对于我的背景来说太暗了。 如何更改排序箭头的颜色？ <b-table show-empty small striped hover stacked="md" :items="rankingList" :fields="fields" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" > package.json "dependencies": { "@nuxtjs/axios": "^5.3.6", "@nuxtjs/pwa": "^3.0.0-0", "bootstrap-vue": "^2.15.0", "chart.js": "^2.9.4", "chartjs-plugin-zoom": "^0.7.7", "node-sass": "^4.11.0", "nuxt": "^2.0.0", "sass-loader": "^7.1.0", "vue-chartjs": "^3.5.1", "vue-template-compiler": "^2.6.11", "vue2-transitions": "^0.3.0" }, "devDependencies": { "@nuxtjs/eslint-config": "^2.0.0", "@nuxtjs/eslint-module": "^1.0.0", "babel-eslint": "^10.0.1", "eslint": "^6.1.0", "eslint-plugin-nuxt": ">=0.4.2", "vue-cli-plugin-i18n": "^0.5.1" } 解决此问题的一种方法（无论如何都不应该存在，因为在暗表变体中我的箭头是白色的，因此它们是可见的）是覆盖 bootstrap 的 css。 因此对于表格排序箭头 bootstrap 使用以下 3 个 css 无排序 body .table.b-table>tfoot>tr>[aria-sort=none], body .table.b-table>thead>tr>th[aria-sort=none]{ 背景图像：url(“数据：图像/svg+xml，%3csvg xmlns='http://www.w3.org/2000/svg'width='101'height='101'view-box='0 0 101 101'preserveAspectRatio='none'%3e%3cpath fill='red ' 不透明度='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='红色' 不透明度='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e% 3c/svg%3e")！重要； } 排序（升序） body .table.b-table>tfoot>tr>[aria-sort=升序], body .table.b-table>thead>tr>th[aria-sort=升序]{ 背景图像：url（“数据：图像/ svg + xml，％3csvg xmlns ='http://www.w3.org/2000/svg'宽度='101'高度='101'view-box='0 0 101 101'preserveAspectRatio='无'%3e%3cpath fill='red'd='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red'opacity='.3'd='M51 101l25 -23 24-22H1l25 22z'/%3e%3c/svg%3e")！重要； } 排序（降序） body .table.b-table.table-dark>tfoot>tr>[aria-sort=降序]，body .table.b-table.table-dark>thead>tr>[aria-sort=降序]，body .table.b-table>.thead-dark>tr>[aria-sort=降序]{ 背景图像：url（“数据：图像/ svg + xml，％3csvg xmlns ='http://www.w3.org/2000/svg'宽度='101'高度='101'view-box='0 0 101 101'preserveAspectRatio='无'%3e%3cpath fill='red'不透明度='.3'd='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red'd='M51 101l25 -23 24-22H1l25 22z'/%3e%3c/svg%3e")！重要； } 如果您注意到每个 css 内部都有一个指向 svg 元素的“background-image”属性。 在每个 svg 元素内，它们被声明为 2 个“路径”元素。 每个路径元素都有一个属性“fill”。 您可以更改属性的值并指向您喜欢的任何颜色。 在上面的例子中我将其设置为 fill="red" 这是一个在 Bootstrap 5+ 上适合我的 css 解决方案。 .bootstrap-table .fixed-table-container .table thead th .both { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIAAwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAToAMABAAAAAEAAAATAAAAADKyfrgAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kr+UDfAAAAYZJREFUOBHVUztIA0EQndk7SCJEMbWlNiltrdJJ8AMigqWiQZSIIKRSFBQLQYgJFn5jZ6EoKgatFCSFha2FxEatE9QiiSY7zooHl3MvaSx0Ydid92Ye8wYW4K8erDdY5DTSUJHepddSILY/MP9eq17UIhVXBt8EChhv8uVG69XWnGwoHQ0aEi+IsIWFsoYhOzfCyQc3UdfJiBVEBae/hVR/a7ksJhXuJma4EU/t+ZBAnGPeZ9UgQvDs/vz6du/m0cLst3ay4eOYn/c0SwDN9mJ++yXATDQd9Tjwr1QrJkSxH0h0AFDRGewyVCgbfTqxX8W0yxw5mRpki7uAkl05DglepRzb6k6kHAxobfrMyiEiXQKg90egzEjpPXAKqVwrlgwnS0wsMv9mb2IbeZKwsNO7XIVbNVoxRa53xTNEUGWFgI62e1avrGbn7SqG7NM0ZYIbsqqJ02dp0IrCnSJW7iqmCtTXQaA4x4ckTKTCyTurUXebOtCOvRQCm42eXJspCmt2/H+9PwELW4FbScq8QAAAAABJRU5ErkJggg=='); } .bootstrap-table .fixed-table-container .table thead th .desc { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= '); } .bootstrap-table .fixed-table-container .table thead th .asc { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg=='); } 这会将箭头的颜色更改为绿色。

获取 bootstrap vue 分页以使用 REST api

尝试让 Bootstrap Vue 使用 REST api，返回一页数据和记录总数（基于此）： 尝试让 Bootstrap Vue 使用 REST api，返回一页数据和记录总数（基于 this）： <template> </div> <b-pagination v-on:change="onPageChange" :total-rows="totalRows" :per-page="perPage" v-model="currentPage" /> <b-table responsive striped hover show-empty stacked="md" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" @filtered="onFiltered"> </b-table> </div> </template> <script> ... export default { name: 'TableList', data() { return { module: null, title: 'Table', items: [], fields: [], errors: [], currentPage: 1, perPage: 15, totalRows: 0, pageOptions: [ 5, 10, 15 ], sortBy: null, sortDesc: false, sortDirection: 'asc', filter: null, } }, created() { ... this.fetch(); }, methods: { fetch() { var me = this; var requestParams = { page: this.currentPage, per_page: this.perPage }; if(this.sortBy) { requestParams = Object.assign({ sort_by: this.sortBy }, requestParams); } Rest('GET', '/table/' + this.table, requestParams, this.$root.user.token) .then(response => { me.items = response.data[1] me.totalRows = response.data[0].total_entries }) .catch(error => { this.errors.push('Error: ' + error.response.status + ': ' + error.response.statusText) }) .finally(() => { //alert('turn off loader!'); }); } } </script> 如果我获取整个表，这个 Vue 就可以工作。但是，当我使用REST api一次返回一页时，计算出的页数为1，并且前进和结束链接处于非活动状态。因此，我无法触发例如以下请求：第 2 页。 REST api 正确返回表中的总行数以及请求的行数，但 Bootstrap Vue 似乎没有对 this.totalRows 的更改进行观察/反应。 我错过了什么？ 您需要将 per-page 组件上的 b-table 属性设置为 0，以禁用本地分页并允许 b-pagination 处理数据。这是一个例子： new Vue({ el: '#app', data() { return { items: [], fields: [{ key: 'postId', label: 'Post ID' }, { key: 'id', label: 'ID' }, { key: 'name', label: 'Name' }, { key: 'email', label: 'Email' }, { key: 'body', label: 'Body' } ], currentPage: 0, perPage: 10, totalItems: 0 } }, mounted() { this.fetchData().catch(error => { console.error(error) }) }, methods: { async fetchData() { this.items = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${this.currentPage}&_limit=${this.perPage}`) .then(res => { this.totalItems = parseInt(res.headers.get('x-total-count'), 10) return res.json() }) .then(items => items) } }, watch: { currentPage: { handler: function(value) { this.fetchData().catch(error => { console.error(error) }) } } } }) <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js"></script> <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app"> <b-table show-empty :items="items" :fields="fields" :current-page="currentPage" :per-page="0"></b-table> <b-pagination size="md" :total-rows="totalItems" v-model="currentPage" :per-page="perPage"></b-pagination> </div> 您还可以禁用表格中的本地分页，以便您的项目提供者负责控制分页。 我的方法是将 items 提供程序函数注入到 B-Table (:items="fetchData") 的 items 属性中，以便它可以在表状态发生变化时随时运行此函数。 // using TypeScript { methods: { public fetchData( context: { [key: string]: any }, callback: (items: Inspection[]) => void ): null { const params = new URLSearchParams() params.append("page", context.currentPage) params.append("count", context.perPage) params.append("sort", context.sortBy) params.append("sort_order", context.sortDesc ? "DESC" : "ASC") this.$store .dispatch(Actions.FETCH_ITEMS) .then(success => success && callback( this.$store.state.items ?? [] )) return null } } 在本例中，我使用的是 Vuex，调度程序进行 HTTP 调用，并通过突变将其保存在存储中。因此，之后我只需通过商店访问这些项目并将它们传递给回调函数以触发重新渲染。 传入的上下文对象提供表状态，例如当前页面、显示的行、排序列和顺序，因此您应该可以创建一个可以附加到 API 端点的查询字符串。 如果由于某种原因需要手动触发重新渲染，只需在表上使用 ref 并调用刷新方法即可： { methods: { rerender() { this.$refs.table.refresh() } } }

Bootstrap form-select：如何在包含两个变量的选项中仅选择一个值？

我有一个包含一组属性的列表，每个属性都有一个编号和一个名称。我已经做到了，所以两者都在我的表单选项中可见 我有一个包含一组属性的列表，每个属性都有一个编号和一个名称。我已经做到了，所以两者都在我的表单选项中可见 <b-col md="3"> <b-form-group :label="$t('departmentNumber')"> <b-form-select vuelidate v-model="$v.consumptionConfiguration.departmentNumber">> <option v-for="property in consumptionConfiguration.properties"> {{ property.propertyNumber + ' ' + '(' + property.name + ')'}} </option> </b-form-select> </b-form-group> </b-col> 但是当用户选择一个选项时，我只希望将 propertyNumber 传递给 v-model。 因此，如果用户选择选项“12345（属性1）”，我只希望输入“12345”。 这可能吗？ 是的，可以通过将 propertyNumber 绑定到 b-form-select 中的 option 元素的值来实现您想要的效果。您可以通过将每个属性上的 v-bind:value 指令设置为 property.propertyNumber 来完成此操作。这样，当用户选择一个选项时，只有 propertyNumber 会传递给 v-model。以下是修改代码的方法： <b-col md="3"> <b-form-group :label="$t('departmentNumber')"> <b-form-select v-model="$v.consumptionConfiguration.departmentNumber"> <option v-for="property in consumptionConfiguration.properties" v-bind:value="property.propertyNumber"> {{ property.propertyNumber + ' (' + property.name + ')' }} </option> </b-form-select> </b-form-group> </b-col>

Vue Bootstrap b表延迟加载数据

所以，以最简单的方式，我使用 Vue Bootstrap 作为我的项目的框架。 我需要向我的项目添加一个自定义表格，其中的数据可以包含数千个单元格（100+ 列和 1k+ 行）。 我...

如何在不同视口引导程序中对齐文本

我正在尝试将一些文本左对齐为大，居中对齐为中，右对齐为小。但我无法让它发挥作用。 我正在使用 vue-bootstrap。 我正在尝试将一些文本左对齐为大，居中对齐为中，右对齐为小。但我无法让它工作。 我正在使用 vue-bootstrap。 <div class="container"> <b-row class="row"> <b-col sm="4" class="my-auto text-lg-left text-md-center text-sm-center"> <span class="text-white"> 2020 copyright, All rights reserved. </span> </b-col> <b-col sm="4" class="mt-2 text-center"> <p>Some text</p> </b-col> <b-col sm="4" class="mt-2 text-right text-sm-center"> <p>Some text</p> </b-col> </b-row> </div> 如何在不同视口上对齐文本？ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <p class="text-lg-left text-md-center text-sm-center"> 2020 copyright, All rights reserved. </p> <quote>Bootstrap v4.3.1 is required, v4.5.3 is recommended</quote> 引导程序 您的类应该位于“p”标签内。 <p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> 要按照您提到的顺序对齐文本，请使用： <p class="text-right text-md-center text-lg-left">Something</p>

vue - Bootstrap-vue：根据具有相同键值的对象选择行（主键）

如何从单独的对象中选择具有相同值的每一行？ 如何从单独的对象中选择具有相同值的每一行？ <b-table :items="CurrentObject" :select-mode="selectMode" ref="selectableTable" selectable @row-selected="onRowSelected" primary-key="uniqueID" > 当前对象： [ {name: 'A', uniqueID: 123, text: 'lorem ipsum'}, {name: 'B', uniqueID: 456, text: 'lorem ipsum'}, {name: 'C', uniqueID: 789, text: 'lorem ipsum'}, ] 单独的对象： [ {uniqueID: 123}, {uniqueID: 456}, {uniqueID: 789}, ] 使用 JavaScript 的 array.findIndex() 和 VueBootstrap 的 selectRow() 似乎可以做到这一点。 模板： <template> <b-container> <div> <h1>Current Object</h1> <b-table :items="currentObject" :select-mode="selectMode" ref="selectableTable" selectable @row-selected="onRowSelected" primary-key="uniqueID" > </b-table> <h2>Separate Object</h2> <div v-for='object in separateObject' @click='selectMyRow(object.uniqueID);'>{{ object.uniqueID }}</div> </div> </b-container> </template> 脚本： <script lang="ts"> import { Vue } from 'vue-property-decorator'; export default class HelloWorld extends Vue { selectMode = 'single'; currentObject = [ {name: 'A', uniqueID: 123, text: 'lorem ipsum'}, {name: 'B', uniqueID: 456, text: 'lorem ipsum'}, {name: 'C', uniqueID: 789, text: 'lorem ipsum'}, ]; separateObject = [ {uniqueID: 123}, {uniqueID: 456}, {uniqueID: 789}, ]; selectMyRow(uniqueID) { const row = this.currentObject.findIndex(x => x.uniqueID === uniqueID); this.$refs.selectableTable.selectRow(row); } onRowSelected() { // do something else } } </script> 工作示例： 如果您需要使用选择模式 multi 实现类似的功能，请使用以下命令： selectMode = 'multi'; ... selectMyRow(uniqueID) { const row = this.currentObject.findIndex(x => x.uniqueID === uniqueID); const table = this.$refs.selectableTable if (table.isRowSelected(row)) { table.unselectRow(row); } else { table.selectRow(row); } } 好的，我有第一个解决方案。 我还无法更新 jsfiddle ... 我有 2 个手表函数，每个函数都有一个 for 循环 第一个循环检查是否在separateArray中 var TableStore = this.TableStore; // -> ARRAY NO OBJECT for (var i = 0; i < TableStore.length; i++) { const row = this.CurrentArray.findIndex(x => x.unID === TableStore[i]); this.$refs.selectableTable.selectRow(row); } 第二个检查是否没有。 （过滤器/包含 -> CurrentArray - DifferentArray） 提供的两种解决方案仅在不使用排序、过滤或分页时才有效。 这是因为 items，在这种情况下 currentObject 并不代表实际的视觉项目。 要在使用排序、过滤或分页时选择正确的项目，您必须使用： this.$refs.selectableTable.computedItems.findIndex(x => x.uniqueID === uniqueID); 我创建了一个小提琴，在使用排序时提供迈克代码的工作适应： https://jsfiddle.net/jz59wn18/

更改 bootstrap-vue 中下拉菜单的文本颜色

我正在创建一个网站并使用 boostrap-vue 将导航栏添加到屏幕顶部。导航栏的右侧将包含一个标题为“Lang”的下拉菜单。我希望“Lang”文本是...

Nuxt 构建失败，在 ./node_modules/bootstrap-vue/:varisouspath 中找不到 core-js 依赖项

当我构建 nuxt.js 项目时，它会抛出不太友好的友好错误。我已经完成了干净安装（删除了 package.lock 和 node_modules），安装了 core-js@2 和 @babel/runtime-core ...

如何固定此 bootstrap-vue 表中显示列名称的顶部标题行？

我有一个 bootstrap-vue 表，如下所示； 这是代码； 我有一个 bootstrap-vue 表，看起来像这样； 这是代码； <template> <div> <b-table hover :items="items"></b-table> </div> </template> <script> export default { data() { return { items: [ { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { age: 89, first_name: 'Geneva', last_name: 'Wilson', _rowVariant: 'danger' }, { age: 40, first_name: 'Thor', last_name: 'MacDonald', _cellVariants: { age: 'info', first_name: 'warning' } }, { age: 29, first_name: 'Dick', last_name: 'Dunlap' } ] } } } </script> 假设表格有很多行。我想固定顶部标题行，以便当我向下滚动表格时，显示列名称的标题行保留在顶部。这使表格更具可读性。 bootstrap-vue 文档中提供了表代码。 https://bootstrap-vue.org/docs/components/table 我正在使用 Vue v2.6 和 BootstrapVue。 您需要使用设置相关元素的样式 position: sticky; 参见：https://developer.mozilla.org/en-US/docs/Web/CSS/position 您还有演示： .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: yellow; padding: 50px; font-size: 20px; } <div class="sticky">foo</div> <div style="height: 2000px;"></div> 因此，您需要查看 Vue 为您生成的结构是什么，并确保将 position: sticky; 样式设置为 position 需要为 sticky 的元素。

如何使用 vue apex 图表 dataPointIndex 填充点击文本

我正在尝试从 Apex 图表中点击填充文本区域。在下面的代码笔中，您可以单击该栏，它会生成带有图表中的值的警报。我想得到那个价值...

如何让 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 来设置默认值...