Question

我正在使用BootstrapVue中的<b-table>组件，并尝试使用formatter callback function来自定义字段输出。 表数据显示正常，但由于某种原因未调用回调函数方法branchName()，并且未将值格式化为分支名称而不是分支ID。

我设置了一个代码框来演示该问题：code demo

该方法的目标是返回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>

感谢您的帮助！

Answer 1

要回答OP的原始问题（为什么未调用formatter函数）：

在您的App.vue文件中，您缺少将fields定义数组绑定到fields的{{1}}道具的情况。试试这个：

<b-table>

如果<template> <div id="app"> <b-table striped hover :items="userProfiles" :fields="fields"></b-table> </div> </template>未传递字段定义数组，它将窥视第一行的项目数据并获取其找到的字段名称，然后生成自己的内部<b-table>定义（只是字段键和人性化标签）

Answer 2

您应该使用插槽来实现自定义行为。有关更多信息，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 ""
}

Answer 3

在您的模板中尝试

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

BootstrapVue：B表项目数据未运行格式化程序回调

3 个答案: