如何在 Bootstrap-Vue Table 组件中呈现自定义数据？

Posted 2023-02-22

【中文标题】如何在 Bootstrap-Vue Table 组件中呈现自定义数据？

【英文标题】：How to render custom data in Bootstrap-Vue Table component?

【发布时间】：2019-10-05 04:24:38

【问题描述】：

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

这是我的场景：

我有一个提供 2 个不同对象数组的数据 API：posts 和 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 键，但没有用户名。 names 数组包含该用户的userId 键和first_name 和last_name。

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

这是我的尝试 (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 吗？谢谢！

【参考方案1】：

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

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

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

看here。

此外，您不应将第二个 api 的结果命名为 names，而应命名为 users。

---

注意：在我链接的示例中，我将users 的结果放在项目中保存的 json 中，并通过获取该 json 的承诺来模拟 api 调用，因为您的 api 密钥超过了它的每日限制并返回500。

【讨论】：

很遗憾，您的用户 API 超过了每日限制，现在返回 500。您可能想要创建一个新帐户，获取虚拟数据，将其保存为项目中的 json 并模拟对它的 http 请求。请注意您当前处理获取数据的方式，编辑器中的任何更改都会导致应用重新构建和重新获取。

非常感谢。我会研究这个。快速提问...find() 方法在浏览器中使用是否安全？我看到它与 IE11 及更早版本不兼容。

要在 IE 中使用它，您需要它的 polyfill。或this one（它们实际上可能是完全相同的东西）。

如果我使用 vue-cli，它是否带有 polyfill？

花了我一段时间，但我得到了它与我的实际数据一起工作。谢谢！ P.S> 我注意到该表没有过滤自定义格式化程序数据......我必须调查一下。