为Vue.js 2.4+提供Bootstrap V4组件和网格系统的实现
Bootstrap 5 第一次刷新或访问页面时下拉箭头显示不正确
我有一个使用 Vue.js 和 Nuxt.js 的 Bootstrap 5 下拉菜单： 我有一个使用 Vue.js 和 Nuxt.js 的 Bootstrap 5 下拉菜单： <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" aria-current="page" href="/">Home</a> </li> <!--Dropdown--> <li class="nav-item dropdown"> <a class="nav-link " href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" > Dropdown1 <font-awesome-icon :icon="['fas', 'sort-down']" size="xs" class="move-up" /> </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown-items</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#">Dropdown-items</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#">Dropdown-items</a></li> </ul> </li> <!--Dropdown--> <!--Dropdown--> <li class="nav-item dropdown"> <a class="nav-link " href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" > Dropdown2 <font-awesome-icon :icon="['fas', 'sort-down']" size="xs" class="move-up" /> </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown-items</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#">Dropdown-items</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#">Dropdown-items</a></li> </ul> </li> <!--Dropdown--> </ul> </div> 对于 Bootstrap Nav Bar 下拉菜单，当页面刷新或第一次访问时，它会显示一个向下的箭头。过一会儿，箭头就会消失。 当箭头显示时，此箭头还会导致我的下拉切换向上移动。 导航栏捕获 1： 刷新或首次访问 导航栏捕获 2： 过了一会儿 我尝试像这样使用CSS隐藏箭头，但它不起作用： .navbar .dropdown-toggle::after { display: none; } 我发现如果我为导航栏添加“”，就不会出现这个问题。 但是，仅在客户端呈现内容并不是一个好的解决方案，因为它会使导航栏显示速度比页面上的内容慢。 感谢您的帮助。 防止 Bootstrap 的默认箭头 Bootstrap 为下拉菜单添加了一个默认箭头 (::after)。要防止出现此箭头： .navbar .dropdown-toggle::after { content: none !important; /* Completely disables the arrow */ } 使用 Scoped CSS 进行 FontAwesome 调整 如果箭头在一段时间后向上移动，您可能需要定位 font-awesome-icon 以确保它不会干扰 Bootstrap 的布局： .navbar .dropdown-toggle .move-up { margin-top: 0 !important; /* Prevents upward shifting */ position: relative; top: 2px; /* Adjust as needed */ }
如何在RTL应用程序中使用Bootstrap-Vue的表单文件输入小部件？
我正在使用Bootstrap-Vue的表单文件输入。由于我申请的是RTL，所以我想逆转它。当前代码： 我正在使用 Bootstrap-Vue 的表单文件输入。由于我申请的是RTL，所以我想逆转它。当前代码： <b-form-file class="modal-input" v-model="fileLocation" :state="stateFileLocation" browse-text="בחר" placeholder="בדיקה בדיקה בדיקה" /> 我得到了什么： 如何将按钮移至另一侧？ 编辑：我厌倦了使用这个建议，但没有任何成功： .custom-file-label::after { left: 0; right: auto; border-left-width: 0; border-right: inherit; } 编辑：postcss-rtl已停产，所以我通过使用postcss.config.js文件尝试了rtlcss： module.exports = { plugins: { 'rtlcss':{ autoRename: true } } } 我还必须安装 [email protected]，因为它依赖于 postcss 8，它不适用于 Vue 2。结果是它颠倒了所有内容，甚至是文本： 我对上面 Tim 的解决方案做了一些更改，以提供一些清晰度。 在下面链接的功能齐全的示例中，我对上面 Tim 提供的示例做了一些细微的更改。 添加了注释，以更好地告知如何应用按钮“右侧”的填充来为占位符文本提供适当的间距 使用您的类和嵌套 SCSS 以避免任何混淆 添加了 ::v-deep，以防您的样式块有范围（因为它们应该适用于组件） 使用占位符语言和文本来完全可视化完整的解决方案 工作示例的屏幕截图（来自下面的 Stackblitz 链接）： 可以在此处查看工作示例： https://stackblitz.com/edit/vue2-vue-cli-ozudwg?file=src/App.vue 注意：您提到添加额外的库来帮助解决此问题，但无济于事。如果应用这些代码更改后它仍然不起作用。请首先检查这些软件包的版本是否不匹配，并报告任何不一致的情况。 "devDependencies": { "@vue/cli-service": "^4.5.13", "sass": "^1.22.10", "sass-loader": "^7.2.0", "vue-template-compiler": "^2.6.14" }, "dependencies": { "bootstrap": "4.5.3", "bootstrap-vue": "2.21.2", "vue": "^2.6.14" } 如果全部检查完毕，请暂时删除您可能已安装的所有软件包。如果它有效，我们就会知道该软件包以某种方式干扰了。 如果删除包时解决方案有效，但您的应用程序的其他区域需要该包，请重新安装包并回发在浏览器中生成的渲染 HTML，同时获取相关渲染的 CSS。这可以使用 Chrome 开发工具并检查元素来完成。 这应该可以解决问题： .custom-file-label:after { left: 0; right: unset; border-right: inherit; border-left: unset; border-radius: 0; } .custom-file-label { padding-left: 75px; // adjust as needed } 这是一个 CodeSandbox
我们决定从一个 UI 框架迁移到另一个 UI 框架（从早期的 BootstrapVueNext 0.7.3 到 PrmeVue v3 或 v4），并且存在风格冲突。 Doprdown 组件样式或 Button 组件样式是 b...
将 Bootstrap-Vue 文本字段更改为 mm/dd/yyyy 格式的正确方法
我正在使用 Bootstrap-Vue 组件，并寻找一种将输入日期字段自定义为 mm/dd/yyyy 格式的方法。有什么正确的方法吗？ 我正在使用 Bootstrap-Vue <b-form-datepicker> 组件，并寻找一种将输入日期字段自定义为 mm/dd/yyyy 格式的方法。有什么合适的方法吗？ <b-input-group class="mb-3"> <b-form-input id="example-input" v-model="dateOfBirth" type="text" placeholder="MM-DD-YYYY" locale="en-US" autocomplete="off" ></b-form-input> <b-input-group-append> <b-form-datepicker v-model="dateOfBirth" button-only right locale="en-US" :date-format-options="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }" aria-controls="example-input" ></b-form-datepicker> </b-input-group-append> </b-input-group> 文档https://bootstrap-vue.org/docs/components/form-datepicker 您只需将 selectedFormatted 中的 b-form-datepicker 值分配给 v-model 的 b-form-input 值即可实现。 注意：对 b-input-group 和 b-form-datepicker 使用不同的 v-model 值 演示： new Vue({ el: '#app', data() { return { value: '', inputValue: '' } }, methods: { onContext(ctx) { this.inputValue = ctx.selectedFormatted; } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/> <link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <div id="app"> <label for="example-input">Choose a date</label> <b-input-group class="mb-3"> <b-form-input id="example-input" v-model="inputValue" type="text" placeholder="MM/DD/YYYY" autocomplete="off" ></b-form-input> <b-input-group-append> <b-form-datepicker v-model="value" button-only right locale="en-US" aria-controls="example-input" :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }" @context="onContext" ></b-form-datepicker> </b-input-group-append> </b-input-group> </div> 将每个组件设置为数字是否无法达到正确的格式？ <b-form-datepicker :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }" locale="en" ></b-form-datepicker> 给予：9/16/2020 格式 dd/mm/yyyy 这将更新实际的日期选择器和 selectedDate，值： <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/> <link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <div id="app"> <label for="example-input">Choose a date</label> <b-input-group class="mb-3"> <b-form-input id="example-input" v-model="formattedDate" type="text" placeholder="DD/MM/YYYY" autocomplete="off" ></b-form-input> <b-input-group-append> <b-form-datepicker v-model="selectedDate" button-only right locale="en-US" aria-controls="example-input" :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }" ></b-form-datepicker> </b-input-group-append> </b-input-group> </div> <script>new Vue({ el: '#app', data() { return { selectedDate: '', formattedDate: '' } }, watch: { selectedDate(newValue) { if (newValue) { const parts = newValue.split('-'); this.formattedDate = parts[2] + '/' + parts[1] + '/' + parts[0]; } else { this.formattedDate = ''; } }, formattedDate(newValue) { if (newValue) { const parts = newValue.split('/'); this.selectedDate = parts[2] + '-' + parts[1] + '-' + parts[0]; } else { this.selectedDate = ''; } } } })</script>
我正在尝试使用 toast 显示消息。所以我在这里尝试了（https://getbootstrap.com/docs/5.1/components/toasts/）上的所有示例代码， 但是当我点击按钮显示toast时，它显示了一次......
我正在使用 BootstrapVue，并且有一个多级下拉菜单（带有类别）。这是官方网站的一个例子： https://bootstrap-vue.org/docs/components/dropdown 我正在使用 BootstrapVue，并且有一个多级下拉菜单（带有类别）。这是官方网站的示例： https://bootstrap-vue.org/docs/components/dropdown <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2"> <b-dropdown-item>First Action</b-dropdown-item> <b-dropdown-item>Second Action</b-dropdown-item> </b-dropdown> 但我不知道如何创建多级菜单（我将下拉菜单放在彼此内部，但它不起作用）！只有一个单级下拉示例！我怎样才能创建一个多层次的？ 谢谢！ 因此，正如我在评论中提到的，您可以包装 b-dropdown 事件并执行如下自定义操作： window.onload = () => { new Vue({ el: '#app', data() { return { name: 'BootstrapVue', isDropdown2Visible: false } }, mounted: function () { this.$root.$on('bv::dropdown::show', bvEvent => { if(bvEvent.componentId === 'dropdown-2') { this.isDropdown2Visible = true; } }) this.$root.$on('bv::dropdown::hide', bvEvent => { if(bvEvent.componentId === 'dropdown-2') { this.isDropdown2Visible = false; } if(this.isDropdown2Visible) { bvEvent.preventDefault() } }) } }) } body { padding: 1rem; } <link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" /> <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script> <div id="app"> <b-dropdown id="dropdown-1" text="Dropdown Button 1" class="m-md-2"> <b-dropdown-item>First Action 1</b-dropdown-item> <b-dropdown-item>Second Action 1</b-dropdown-item> <b-dropdown id="dropdown-2" text="Dropdown Button 2" class="m-md-2"> <b-dropdown-item>First Action 2</b-dropdown-item> <b-dropdown-item>Second Action 2</b-dropdown-item> </b-dropdown> </b-dropdown> </div> 你可以尝试这样的事情 此片段包含一级菜单的逻辑。您可以将代码编辑为 按您的要求 JSBin 链接 new Vue({ el: "#app", data: { menu: [ { title : 'one'}, { title : 'two'}, { title : 'three',showSubMenu : false, children : [ { title : 'four'}, { title : 'five'}, ]}, ] }, methods : { toogleItem(index){ if(this.menu[index].children){ if(!this.menu[index].showSubMenu){ this.menu[index].showSubMenu = true } else { this.menu[index].showSubMenu = false } } } } }) .sub-menu{ position: absolute; min-width: 10rem; padding: .5rem 0; margin: .125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <!-- Load required Bootstrap and BootstrapVue CSS --> <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.min.css" /> <!-- Load polyfills to support older browsers --> <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script> <!-- Load Vue followed by BootstrapVue --> <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <!-- Load the following for BootstrapVueIcons support --> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> </head> <body> <div id="app"> <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2"> <b-dropdown-item v-for="(item,index) in menu" :key="index" @mouseover.native="toogleItem(index)" @mouseout.native="toogleItem(index)"> <span>{{item.title}} <b-icon-caret-down-fill :scale="0.6" v-if="item.children"></b-icon-caret-down-fill></span> <div v-if="item.children" class="sub-menu" v-show="item.showSubMenu"> <b-dropdown-item v-for="(item,index) in item.children" :key="index">{{item.title}} </b-dropdown-item> </div> </b-dropdown-item> </b-dropdown> </div> </body> </html>
Bootstrap 5 选项卡不会根据 vue 3 项目中的选项卡单击而更改
我正在尝试使用 bootstrap 5 构建一个 vue3 应用程序。我正在添加选项卡。我可以单击选项卡，但选项卡内容停留在初始选项卡上。我该如何解决这个问题？ 包.json： { “名字&...
我的第一个 Vue.js (3) 应用程序使用 Bootstrap-vue (5)，但弹出窗口不起作用
我目前正在学习 Vue.js，并且对 Bootstrap 有一些经验。当我看到你可以将 Bootstrap 与 Vue.js 一起使用时，我想我应该尝试一下。我的代码相当简单，一个下拉菜单和一个弹出窗口......
我在组件的主 div 上使用背景图像，但它仅覆盖我在该主 div 中提供的内容（就像如果我只有半页内容，它只在其后面呈现......
将 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; }
所以在我的项目中我遇到了一个问题， 所以我想做的是，我在这个对象中有一个用户（对象）列表，我有一个属性 teamId（从 api 端点调用），我必须...
使用 schema 使 vue-form-generator 部分可折叠
我正在使用 vue-form-generator 库来创建表单。 问题是我的表单上有 116 个问题，我想折叠一些问题，使表单更易于用户管理。 我...
我想获取我的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() } } }