b-table 在不考虑字段的情况下呈现所有数据

Question

我正在使用 laravel 和 Vue JS 构建一个项目，以创建带有分页等的公司列表。

我正在使用 bootstrap-table，问题是 table 在不考虑我作为参数提供的字段的情况下呈现所有数据。我想使用范围字段在每一行内显示自定义 css 。我将相同的 table 与其他数据一起使用，它工作正常。

这是组件代码

    <template>
      <div class="row">
        <div class="col-lg-3 mt-lg-5">
          <div class="card bord-rad-5">
            <div class="card-header purple-background top-borders">
              <h4
                class="title-align font-montserrat text-light white-text-color mt-3 position-filter"
              >
                Filter
              </h4>
            </div>
            <div class="card-body">
              <div class="d-flex flex-column">
                <div
                  class="gray-text-color font-weight-bold font-montserrat-regular mb-2"
                >
                  <h5>{{ $t('labels.frontend.filters.companyName') }}</h5>
                </div>
                <div class="form-group">
                  <b-form-group class="ml-1">
                    <b-input-group>
                      <b-form-input v-model="filter" placeholder="Type to search">
                      </b-form-input>
                      <b-input-group class="mr-2">
                        <b-button
                          class="mr-left-90 mr-4 mt-2 font-montserrat-regular"
                          :disabled="!filter"
                          @click="filter = ''"
                        >
                          {{ $t('labels.frontend.companies.clear') }}
                        </b-button>
                      </b-input-group>
                    </b-input-group>
                  </b-form-group>
                </div>
                <div
                  class="gray-text-color font-weight-bold font-montserrat-regular mt-2 mb-2"
                >
                  <h5>{{ $t('labels.frontend.filters.companyType') }}</h5>
                </div>
                <div class="form-check form-check-inline mt-1 mb-1">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="ac1"
                    value="AssemblyCompany"
                  />
                  <label
                    class="form-check-label gray-text-color font-weight-bold font-montserrat-thin"
                    for="ac1"
                  >
                    {{ $t('labels.frontend.filters.dismantling') }}
                  </label>
                </div>
                <div class="form-check form-check-inline mt-1 mb-1">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="gd1"
                    value="garagebusiness"
                  />
                  <label
                    class="form-check-label gray-text-color font-weight-bold font-montserrat-thin"
                    for="gd1"
                  >
                    {{ $t('labels.frontend.filters.garage') }}
                  </label>
                </div>
                <div class="form-check form-check-inline mt-1 mb-1">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="rb1"
                    value="RevisionCompany"
                  />
                  <label
                    class="form-check-label gray-text-color font-weight-bold font-montserrat-thin"
                    for="rb1"
                  >
                    {{ $t('labels.frontend.filters.revision') }}
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-5 col-lg-9">
          <div class="card-header purple-background bord-top-lr-5">
            <b-row class="mt-2">
              <b-col>
                <h4 class="title-align font-montserrat text-light white-text-color">
                  {{ items.count }} {{ $t('labels.frontend.companies.results') }}
                </h4>
              </b-col>
              <b-form-group label-cols-sm="3" class="mb-2 w-25 mr-4">
                <b-form-select v-model="perPage" :options="pageOptions">
                </b-form-select>
              </b-form-group>
            </b-row>
          </div>
          <div class="card-body white-bg">
            <div class="grid-x grid-padding-x m-2 border-0">
              <div class="border-0 mb-2">
                <b-table
                  striped
                  hover
                  :items="items.data"
                  :fields="columns"
                  :filter="filter"
                  :current-page="currentPage"
                  :per-page="perPage"
                  :outlined="outlined"
                  responsive
                >
                  <template slot="name" class="m-3" slot-scope="item">
                    <h5 class="title-align font-montserrat" style="color: #5b2557">
                      <a :href="data.item.url" :title="data.item.name">
                        {{ data.item.name }}
                      </a>
                    </h5>
                    <div class="row">
                      <div class="col">
                        <p
                          class="gray-text-color font-montserrat-thin font-weight-bold"
                        >
                          {{ data.item.street }}
                          {{ data.item.building_nr }} {{ data.item.postal }}
                          {{ data.item.city }} {{ data.item.state }}
                        </p>
                      </div>
                      <div class="col ml-lg-5">
                        <p
                          class="font-montserrat-thin blue-light-color font-weight-bold"
                        >
                          T. {{ data.item.phone }}<br />
                          <a
                            :href="data.item.website"
                            target="_blank"
                            :title="data.item.name"
                            class="gray-text-color"
                          >
                            {{ $t('labels.frontend.companies.goTo') }}
                          </a>
                        </p>
                      </div>
                      <div class="col ml-lg-5">
                        <a
                          class="font-montserrat-regular"
                          :href="
                            $app.route('frontend.companies.show', data.item.slug)
                          "
                          style="color: #74aee0"
                        >
                          {{ $t('labels.frontend.companies.moreInfo') }} »
                        </a>
                      </div>
                    </div>
                    <button
                      class="mb-3 blue-light-bg btn bord-rad-5 white-text-color font-montserrat-regular"
                      href="#"
                    >
                      {{ $t('labels.frontend.companies.stock') }}
                    </button>
                    <br />
                  </template>
                </b-table>
                <b-row>
                  <b-col md="6" class="my-1">
                    <b-pagination
                      v-model="currentPage"
                      :total-rows="totalRows"
                      :per-page="perPage"
                      class="my-0"
                    ></b-pagination>
                  </b-col>
                </b-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'SearchCompaniesTable',
      props: {
        companyName: {
          type: String,
          required: false,
          default: () => ''
        }
      },
      data() {
        return {
          filter: null,
          totalRows: 1,
          currentPage: 1,
          perPage: 10,
          pageOptions: [5, 10, 25],
          outlined: true,
          columns: [
            {
              field: 'name',
              label: 'Name'
            }
          ],
          items: []
        }
      },
      computed: {
        rows() {
          return Object.keys(this.items).length
        }
      },
      mounted() {
        axios.get('/companies/search').then(response => {
          this.items = response.data
          this.totalRows = this.items.count
          console.log(this.fields)
        })
      }
    }
    </script>
    <style>
    .hidden_header {
      display: none;
    }
    thead {
      border: none !important;
    }
    tbody {
      border: none !important;
      border-color: white;
    }
    table {
      border: none !important;
    }
    th {
      border: none !important;
    }
    tr {
      border: none !important;
    }
    td {
      border: none !important;
    }
    .mr-left-90 {
      margin-left: 68px;
    }
    .position-filter {
      position: relative;
      top: -8px;
    }
    </style>

你能帮我找到解决办法吗？

在这里你可以找到组件的代码

<template>
      <div class="row">
        <div class="col-lg-3 mt-lg-5">
          <div class="card bord-rad-5">
            <div class="card-header purple-background top-borders">
              <h4
                class="title-align font-montserrat text-light white-text-color mt-3 position-filter"
              >
                Filter
              </h4>
            </div>
            <div class="card-body">
              <div class="d-flex flex-column">
                <div
                  class="gray-text-color font-weight-bold font-montserrat-regular mb-2"
                >
                  <h5>{{ $t('labels.frontend.filters.companyName') }}</h5>
                </div>
                <div class="form-group">
                  <b-form-group class="ml-1">
                    <b-input-group>
                      <b-form-input v-model="filter" placeholder="Type to search">
                      </b-form-input>
                      <b-input-group class="mr-2">
                        <b-button
                          class="mr-left-90 mr-4 mt-2 font-montserrat-regular"
                          :disabled="!filter"
                          @click="filter = ''"
                        >
                          {{ $t('labels.frontend.companies.clear') }}
                        </b-button>
                      </b-input-group>
                    </b-input-group>
                  </b-form-group>
                </div>
                <div
                  class="gray-text-color font-weight-bold font-montserrat-regular mt-2 mb-2"
                >
                  <h5>{{ $t('labels.frontend.filters.companyType') }}</h5>
                </div>
                <div class="form-check form-check-inline mt-1 mb-1">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="ac1"
                    value="AssemblyCompany"
                  />
                  <label
                    class="form-check-label gray-text-color font-weight-bold font-montserrat-thin"
                    for="ac1"
                  >
                    {{ $t('labels.frontend.filters.dismantling') }}
                  </label>
                </div>
                <div class="form-check form-check-inline mt-1 mb-1">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="gd1"
                    value="garagebusiness"
                  />
                  <label
                    class="form-check-label gray-text-color font-weight-bold font-montserrat-thin"
                    for="gd1"
                  >
                    {{ $t('labels.frontend.filters.garage') }}
                  </label>
                </div>
                <div class="form-check form-check-inline mt-1 mb-1">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="rb1"
                    value="RevisionCompany"
                  />
                  <label
                    class="form-check-label gray-text-color font-weight-bold font-montserrat-thin"
                    for="rb1"
                  >
                    {{ $t('labels.frontend.filters.revision') }}
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-5 col-lg-9">
          <div class="card-header purple-background bord-top-lr-5">
            <b-row class="mt-2">
              <b-col>
                <h4 class="title-align font-montserrat text-light white-text-color">
                  {{ items.count }} {{ $t('labels.frontend.companies.results') }}
                </h4>
              </b-col>
              <b-form-group label-cols-sm="3" class="mb-2 w-25 mr-4">
                <b-form-select v-model="perPage" :options="pageOptions">
                </b-form-select>
              </b-form-group>
            </b-row>
          </div>
          <div class="card-body white-bg">
            <div class="grid-x grid-padding-x m-2 border-0">
              <div class="border-0 mb-2">
                <b-table
                  striped
                  hover
                  :items="items.data"
                  :fields="columns"
                  :filter="filter"
                  :current-page="currentPage"
                  :per-page="perPage"
                  :outlined="outlined"
                  responsive
                >
                  <template slot="name" class="m-3" slot-scope="item">
                    <h5 class="title-align font-montserrat" style="color: #5b2557">
                      <a :href="data.item.url" :title="data.item.name">
                        {{ data.item.name }}
                      </a>
                    </h5>
                    <div class="row">
                      <div class="col">
                        <p
                          class="gray-text-color font-montserrat-thin font-weight-bold"
                        >
                          {{ data.item.street }}
                          {{ data.item.building_nr }} {{ data.item.postal }}
                          {{ data.item.city }} {{ data.item.state }}
                        </p>
                      </div>
                      <div class="col ml-lg-5">
                        <p
                          class="font-montserrat-thin blue-light-color font-weight-bold"
                        >
                          T. {{ data.item.phone }}<br />
                          <a
                            :href="data.item.website"
                            target="_blank"
                            :title="data.item.name"
                            class="gray-text-color"
                          >
                            {{ $t('labels.frontend.companies.goTo') }}
                          </a>
                        </p>
                      </div>
                      <div class="col ml-lg-5">
                        <a
                          class="font-montserrat-regular"
                          :href="
                            $app.route('frontend.companies.show', data.item.slug)
                          "
                          style="color: #74aee0"
                        >
                          {{ $t('labels.frontend.companies.moreInfo') }} »
                        </a>
                      </div>
                    </div>
                    <button
                      class="mb-3 blue-light-bg btn bord-rad-5 white-text-color font-montserrat-regular"
                      href="#"
                    >
                      {{ $t('labels.frontend.companies.stock') }}
                    </button>
                    <br />
                  </template>
                </b-table>
                <b-row>
                  <b-col md="6" class="my-1">
                    <b-pagination
                      v-model="currentPage"
                      :total-rows="totalRows"
                      :per-page="perPage"
                      class="my-0"
                    ></b-pagination>
                  </b-col>
                </b-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'SearchCompaniesTable',
      props: {
        companyName: {
          type: String,
          required: false,
          default: () => ''
        }
      },
      data() {
        return {
          filter: null,
          totalRows: 1,
          currentPage: 1,
          perPage: 10,
          pageOptions: [5, 10, 25],
          outlined: true,
          columns: [
            {
              field: 'name',
              label: 'Name'
            }
          ],
          items: []
        }
      },
      computed: {
        rows() {
          return Object.keys(this.items).length
        }
      },
      mounted() {
        axios.get('/companies/search').then(response => {
          this.items = response.data
          this.totalRows = this.items.count
          console.log(this.fields)
        })
      }
    }
    </script>

我做错了什么，谢谢你的回答

Answer 1

在您的第一个代码片段中，您的 style 没有使用 scoped 属性，这可能意味着您项目的其余部分也在做同样的事情。这可能意味着您的 CSS 正在全局级别被覆盖，如果您在渲染后检查元素，您可以看到您的 CSS 是否在某处被覆盖。

此外，如果您碰巧使用 SCSS，bootstrap-vue 库可以很好地支持它，我发现调整 bootstrap css更容易。

Answer 2

我通过将模板标签内的代码从 <template slot="name" slot-scope="item"> 更改为 <template v-slot:cell(name)="data">

来解决问题

b-table 在不考虑字段的情况下呈现所有数据

b-table render all the data without respecting the fields

vue.js

vuejs2

vue-component

production-environment