BootstrapVue: данные элемента B-таблицы не запускают обратный вызов средства форматирования

Я использую компонент <b-table> из BootstrapVue и пытаюсь настроить вывод поля с помощью функция обратного вызова форматировщика. Данные таблицы отображаются нормально, но по какой-то причине метод функции обратного вызова branchName() не вызывается, и значение не форматируется по имени ветки вместо идентификатора ветки.

Я установил codeandbox, чтобы продемонстрировать проблему: демонстрация кода

Цель метода - вернуть имя элемента branch. Однако возвращается только branch_id. Другими словами, в строке записи под столбцом таблицы Branch должно быть указано ACME10, а не 10.

Мой файл с именем App.vue:

<template>
  <div id="app">
    <b-table striped hover :items="userProfiles"></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userProfiles: [
        {
          uid: "3",
          branch: 10
        },
        {
          uid: "1",
          branch: 20
        },
        {
          uid: "2",
          branch: 13
        }
      ],
      branches: [
        {
          branch_id: 13,
          branch: "ACME13"
        },
        {
          branch_id: 10,
          branch: "ACME10"
        },
        {
          branch_id: 20,
          branch: "ACME20"
        }
      ],
      fields: [
        {
          key: "branch",
          formatter: "branchName"
        }
      ]
    };
  },
  methods: {
    branchName(value) {
      const name = this.branches[0].find(branch => value === branch.branch_id);
      return name;
    }
  }
};
</script>

Спасибо за вашу помощь!


javascript vue.js vuejs2 bootstrap-vue
person redshift    schedule 04.09.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вы должны использовать слоты для реализации настраиваемого поведения, например. Для получения дополнительной информации https://bootstrap-vue.js.org/docs/components/table#scoped-field-slots.

Вот как вы могли бы реализовать свой код

<template>
  <div id="app">
    <b-table striped hover :items="userProfiles">
      <template slot="[uid]" slot-scope="data">{{ data.item.uid }}</template>
      <template slot="[branch]" slot-scope="data">{{ branchName(data.item.branch) }}</template>
    </b-table>
  </div>
</template>

Метод:

branchName(value) {
  const branch = this.branches.find(branch => value === branch.branch_id);
  if (branch) {
    return branch.branch
  }

  return ""
}
person dreijntjens    schedule 04.09.2019
comment
Да, но по какой-то причине я получаю следующую консольную ошибку при использовании метода slots: main.js:26 Error: TypeError: Cannot read property 'branch' of undefined Info: render - person redshift; 04.09.2019
comment
Когда я использую указанный выше метод слота, он не будет работать, однако, когда я просто сделаю: {{ branchName(data.item.branch) }} в шаблоне слота, он будет выплевывать json. По какой-то причине я не могу присоединить .branch к этому методу .. он выдает ошибку консоли - person redshift; 04.09.2019
comment
Не могли бы вы быть более конкретными? Какая именно это линия? Я создал codeandbox, кстати, чтобы показать, что он работает: codesandbox.io/s/btable -print-branch-name-1gte0 - person dreijntjens; 04.09.2019
comment
Я предполагаю, что данные в de example не являются реальными данными, вероятно, метод возвращает null в определенном случае - person dreijntjens; 04.09.2019
comment
Для этого примера я добавил .branch, поскольку метод возвращал объект. Обычно я решаю это в самом методе. - person dreijntjens; 04.09.2019
comment
Некоторые данные записи в моих реальных данных возвращают null. Это проблема? - person redshift; 04.09.2019
comment
Да, я обновил свой код, поэтому он также будет работать с нулевыми значениями - person dreijntjens; 04.09.2019
comment
Позвольте нам продолжить это обсуждение в чате. - person redshift; 04.09.2019

arrow_upward
1
arrow_downward

Чтобы ответить на исходный вопрос OP (почему не вызывалась функция форматирования):

В вашем App.vue файле отсутствует привязка массива определений fields к fields опоре <b-table>. Попробуй это:

<template>
  <div id="app">
    <b-table striped hover :items="userProfiles" :fields="fields"></b-table>
  </div>
</template>

Если <b-table> не передан массив определения поля, он просматривает данные элемента первой строки и выбирает имена полей, которые он находит, а затем генерирует собственное внутреннее определение fields (только ключи полей и гуманизированные метки)

person Troy Morehouse    schedule 04.09.2019

arrow_upward
-1
arrow_downward

попробуйте это в своем шаблоне

<template v-slot:cell(name)="data">
      <router-link :to="/route/${data.index}">
        {{ data.value }}
      </router-link>
person williammussa    schedule 22.08.2020