标签: bootstrap-vue

我正在将Bootastrap-Vue与JavaScript结合使用，我想在代码中使用Moment.js。

我有时间，但是不正确...有人可以帮我吗？

顺便说一句，这是我在StackOverflow上遇到的第一个问题，因此如果我问错了，我深表歉意。

谢谢。

var moment = require('moment')
export default {
    name: 'something',
    data() {
        return {
            something: [],
            currentPage: 1,
            total_something: 1,
            something_fields: {
                id: {
                    label: 'Id',
                    sortable: true
                },
                purpose: {
                    label: 'Purpose',
                    sortable: false
                },
                state: {
                    label: 'State',
                    sortable: false
                },
                updated: {
                    key: 'updated',
                    label: 'Updated',
                    formatter: (value, key, item) => {
                            return moment(item.updated).calendar();

                    }
                }
            },
        }
    },
    created() {
        this.loadSomething(0, 10)
    },
    watch: {
        currentPage: function (newPage) {
            this.loadSomething(newPage, 10)
        }
    }, …

我b-table在页面上有一个元素,当前显示数据库中的一堆数据.目前它是分页的,但反馈表明他们宁愿在一个滚动视图中显示所有信息.我可以做到这一点,但问题是如果我设置一个包含div滚动整个表,它也会滚动列标题.我需要找到一种方法,只需滚动表体,同时保留列标题,我宁愿能够在元素本身的范围内进行,而不是使用完全独立的标题绑定一些东西和一堆Javascript索具在背景中的身体.

在bootstrap-vue表组件的组件引用下,它表示有一个属性被调用tbody-class,看起来它是一种为tbody指定自定义类的方法(疯狂到足够).但是,该页面没有说明如何使用它,我的实验没有产生任何结果:

<b-table 
    tbody-class="my-class"   <- Applies prop to table but not to tbody
    :tbody-class="my-class"  <- Seemingly ignored entirely
>

听起来这个问题在这个问题线程上得到了解决,但它并没有详细说明它是如何解决的.它提到该功能已添加到"下一次更新"中,但该注释后发布的版本的补丁说明和文档都没有提到添加(除非它表示我在前一段中提到的属性).它确实讨论了使用CSS选择器以迂回方式应用样式,但我也无法使用它.(在以下示例中,tbodyChrome检查器中没有应用的样式.)

.table.my-table > tbody {
    height: 100px;
}

我使用的Vue版本是2.2.6.

我有一个用bootstrap-vue生成的表,它显示了系统搜索的结果.

结果表显示给用户的记录,用户可以对它们进行排序并过滤它们.

如何<th>在bootstrap-vue <b-table>元素生成的表头下添加搜索字段？

当前表格的屏幕截图:

通缉表的样机:

我正在为数据表使用Bootstrap-Vue，并在仪表板中获取了下表：

我可以通过单击垃圾桶图标成功删除项目。它使用Axios发送AJAX请求。但是，删除后，它仍然显示该项目，直到我手动刷新网页为止。我该如何解决？我不想提出另一个AJAX请求以加载更新版本，我认为解决此问题的最佳方法是从数据表中删除已删除的项目行。

我试图给我的表一个ref标签，并使用调用刷新函数，this.$refs.table.refresh();但没有成功。

我的代码：

<template>
<div>
    <b-modal ref="myModalRef" hide-footer title="Delete product">
        <div class="container">
            <div class="row">
                <p>Are you sure you want to delete this item?</p>
                <div class="col-md-6 pl-0">
                    <a href="#" v-on:click="deleteItem(selectedID)" class="btn btn-secondary btn-sm btn-block">Confirm</a>
                </div>
                <div class="col-md-6 pr-0">
                    <a href="#" v-on:click="$refs.myModalRef.hide()" class="btn btn-tertiary btn-sm btn-block">Cancel</a>
                </div>
            </div>
        </div>
    </b-modal>
    <div id="main-wrapper" class="container">
        <div class="row">
            <div class="col-md-12">
                <h4>Mijn producten</h4>
                <p>Hier vind zich een overzicht van uw producten plaats.</p>
            </div>

            <div class="col-md-6 col-sm-6 col-12 mt-3 text-left">
                <router-link class="btn btn-primary btn-sm" …

我正在尝试使用 BootrapVue 同时使用 buefy 的 b-table 组件。我猜 BootstrapVue 也有一个名为 b-table 的组件，它会导致冲突并导致 buefy 的表无法正常工作。当我删除 BootstrapVue 时，Buefy 表会正确显示。我是 vue 新手，我不确定如何解决这样的命名空间冲突，或者是否可能。

main.js

import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);

import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
Vue.use(Buefy)

元数据表.js

<template>
  <div>
    <!-- BootstrapVue -->
    <b-modal id="metadata-modal" title="Metadata" size="lg">
      <p class="my-4">
        <table style="text-align:left">
          <tbody>
            <tr v-for="(value,key) in current_metadata">
              <td style="vertical-align:top;font-weight:bold;">{{key}}&nbsp</td>
              <td><code><pre>{{JSON.stringify(value, null, 2)}}</pre></code></td>
            </tr>
          </tbody>
        </table>
      </p>
    </b-modal>
    <!-- Buefy -->
    <b-table
        :data="data"
        paginated
    >
      <template slot-scope="props">
          <b-table-column field="metadata.title" label="Title" sortable>
              {{ props.row.metadata.title }}
          </b-table-column>
      </template>
    </b-table>
  </div> …

我使用 Bootstrap-Vue 构建了以下表单，其中应用了一些 Vuelidation 代码。

<b-form @submit.prevent="onSubmit">
      <input type="hidden" name="_token" :value="csrf" />
      <transition-group name="fade">
        <b-form-select
          :class="{ 'hasError': $v.form.dobDate.$error }"
          class="mb-3"
          name="dobDate"
          id="dobDate"
          v-model.lazy="$v.form.dobDate.$model"
          :options="optionsDays"
          v-if="isSixteen"
          key="dobDateSelect"
        >
          <template slot="first">
            <option value disabled>Please select a date</option>
          </template>
        </b-form-select>
      </transition-group>
      <transition-group name="fade">
        <b-form-select
          :class="{ 'hasError': $v.form.dobMonth.$error }"
          class="mb-3"
          name="dobMonth"
          id="dobMonth"
          v-model.lazy="$v.form.dobMonth.$model"
          :options="optionsMonths"
          v-if="isSixteen"
          value="optionsMonths.key"
          key="dobMonthSelect"
        >
          <template slot="first">
            <option value disabled>Please select a Month</option>
          </template>
        </b-form-select>
      </transition-group>

      <b-alert
        show
        variant="danger"
        class="error"
        v-if="!$v.form.dobYear.required"
      >This field is required</b-alert>

      <b-alert
        show
        variant="danger"
        class="error"
        v-if="!$v.form.dobYear.minLength"
      >Field …

根据文档，使用 a<b-container>是布局系统的关键：

Containers( <b-container>)是Bootstrap中最基本的布局元素，在使用网格系统时是必需的。

但我不太明白它们应该用在哪里。

• 作为包含整个页面的一种方式？
• 作为容器<b-row>？
• 作为任何元素的容器？

我想要找出的是<b-container>除了元素之外我什么时候应该使用。我相当确定我不应该（或不必）使用它来打包按钮。但也许当有两个按钮彼此相邻时呢？（这只是一个例子 - 我对一般情况感兴趣）

对于何时使用有明确的规则吗<b-container>？

我有一个 vue 组件，它实现了 vue-chartjs 的 Horizo​​ntalBar 组件，我将其渲染为 bootstrap-vue 表中的单元格。我的愿望是让图表保持固定的高度，但随着窗口的增大/缩小而水平缩放。

当页面首次加载时，图表播放得很好，但在调整大小以覆盖页面上的其他元素时，图表会不受控制地增长。

我怎样才能让他们做出正确的反应而不让他们去不该去的地方？我还想确保它们实际上占据了它们所在的表格单元格的范围，而不是奇怪地停止了几个像素。

这是我的相关组件代码：

<script>
import { HorizontalBar } from "vue-chartjs";
import Constants from "../../services/Constants";

export default {
  name: "ResponseGraph",
  extends: HorizontalBar,
  props: { /* some props */ },
  data: () => ({
    chartData: {},
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{ stacked: true, display: false }],
        yAxes: [{ stacked: true, display: false }]
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      }
    }
  }),
  mounted() { …

当我开始写作时，我想输入大写第一个字母。

<b-form-input v-model="formSurname" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required> </b-form-input>

我也有这个过滤器。但v-model="formSurname | capitalize"不起作用我尝试过:value="formSurname | capitalize"但它也不起作用

Vue.filter("capitalize", function (value) {
    if (!value) 
        return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
});

如何实时输入更改我的第一个字母？

Webpack 捆绑分析器显示 bootstrap-vue 包中的图标大小为 535kb。

我不想在项目中使用它们，所以我一直尝试使用 webpack IgnorePlugin 排除该包。

根据文档中的示例，我尝试这样写：

new webpack.IgnorePlugin({
        resourceRegExp: /^icons(.*)$/,
        contextRegExp: /^bootstrap-vue(.*)$/
    })

但它不起作用。我唯一能够重现的是通过这个限制完全排除 bootstrap-vue libnew webpack.IgnorePlugin(/bootstrap-vue/)

那么我如何才能只排除图标呢？