如何在Bootstrap-Vue Table组件中呈现自定义数据? [英] How to render custom data in Bootstrap-Vue Table component?

问题描述

我正在使用 Bootstrap-Vue 和 VueJs ，并且需要一些有关帮助从多个数据对象呈现自定义数据并将数据显示到表格中的帮助.具体来说，我正在关注Bootstrap-Vue TABLE文档的这一部分: https://bootstrap-vue.js.org/docs/components/table#formatter-callback ，但是我不确定如何将其应用于我的代码.

I am using Bootstrap-Vue and VueJs and need help with some custom data rendering from multiple data objects and displaying the data into a table. Specifically, I am following this part of the Bootstrap-Vue TABLE docs: https://bootstrap-vue.js.org/docs/components/table#formatter-callback but I am unsure how to apply it to my code.

这是我的情况:

我有一个数据API，提供2种不同的对象数组: posts 和 names

I have a data API providing 2 different arrays of objects: posts and names

帖子:

    [
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
...snip..
    ]

和名称:

[{"userId":1,"first_name":"Neill","last_name":"Dexter","email":"[e-mail]"},
...snip
]

posts 数组包含一个 userId 键，但没有用户名. 名称 数组包含 userId 键以及该用户的 first_name 和 last_name .

The posts array contains a userId key but no name of the user. The names array contains the userId key and the first_name and last_name of that user.

我想做的只是在Bootstrap-vue Table组件中显示用户的全名，而不是 userId ，因为仅显示userId是没有意义的./strong>

What I want to do is simply display the full name of the user in my Bootstrap-vue Table component rather than the userId because just showing the userId doesn't make sense.

这是我的尝试( 链接到可编辑的实时代码 ):

Here's my attempt (link to editable live code):

<template>
  <div>
    <b-table :items="posts" :fields="fields">
      <!-- A custom formatted column -->
      <template slot="name" slot-scope="data">{{ data.value.userId }}</template>
    </b-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      posts: [],
      names: [],
      // key name is the slot name
      fields: [
        { key: "id" },
        { key: "title" },
        { key: "body" },
        { key: "name", label: "Assigned To", formatter: "assignNames" }
      ]
    };
  },
  created() {
    this.getPosts();
    this.getNames();
  },
  methods: {
    getPosts() {
      axios.get("https://jsonplaceholder.typicode.com/posts").then(resp => {
        this.posts = resp.data;
      });
    },
    getNames() {
      axios
        .get("https://my.api.mockaroo.com/users.json?key=f119e0f0")
        .then(resp => {
          this.names = resp.data;
        });
    },
    assignNames() {
      var i;
      for (i = 0; i < this.posts.length; i++) {
        if (this.posts[i].userId !== null) {
          const result = this.names.filter(name => {
            return name.userId === this.posts[i].userId;
          });
          this.posts[i].userId =
            result[0].first_name + " " + result[0].last_name;
        }
      }
    }
  }
};
</script>

任何人都有关于如何显示用户全名而不是仅显示userId的任何提示?谢谢！

Anyone got any tips on how I can show the full name of my users rather than just the userId? Thanks!

推荐答案

assignNames(id) {
  const user = this.names.find(e => e.userId === id);
  return  user ? `${user.first_name} ${user.last_name}` : 'loading...';
}

...但是，显然，密钥必须是 userId ，因为这是 post 结构中引用的属性的名称:

... but, obviously, the key has to be userId, as that's the name of the property referenced in post structure:

{ key: "userId", label: "Assigned To", formatter: "assignNames" }

在此处查看.

此外，您不应该从第二个api的 names 名称中命名结果，而是 users .

Also, you shouldn't name the results from second api names, but users.

注意:在我链接的示例中，我将 users 的结果放入保存在项目中的json内，并通过承诺获取json来模拟api调用，如下所示:您的api密钥超出了每日限制，并返回了 500 .

Note: In the example I linked I placed the results of users inside a json saved in the project and mocked the api call by a promise getting that json, as your api key exceeded its daily limit and was returning a 500.

这篇关于如何在Bootstrap-Vue Table组件中呈现自定义数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！