b-таблица отображает все данные без учета полей

Question

Я строю проект, используя laravel и Vue JS, чтобы создать список компаний с нумерацией страниц и т. Д.Я даю как парам.Я хочу использовать область видимости, чтобы показать собственный CSS внутри каждой строки.Я использую ту же таблицу с другими данными, она отлично работает.

Это код компонента

    <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

Я исправил проблему, изменив код внутри тега шаблона с <template slot="name" slot-scope="item"> на <template v-slot:cell(name)="data">

Answer 2

В вашем первом фрагменте кода ваш style не использует атрибут scoped, что может означать, что остальная часть вашего проекта делает то же самое.Это может означать, что ваш CSS перезаписывается на глобальном уровне. Если вы проверяете элемент после рендеринга, вы можете увидеть, перезаписывается ли ваш CSS где-то.

Кроме того, если вы используете SCSS, загрузчик-Библиотека Vue поддерживает ее очень хорошо, и я обнаружил, что проще настроить загрузчик CSS.