Bootstrap-vue：如何使用内置的 table 过滤组件过滤第二组数据？

Question

我正在使用 VueJS 和 Bootstrap-vue 的 table 组件及其过滤选项来过滤 table 数据。但是，看起来 Bootstrap/Table 过滤组件只能应用于原始项目数组数据，因此根据文档 "it is not currently possible to filter data based on custom rendering of virtual columns"： https://bootstrap-vue.js.org/docs/components/table#filtering

我的情况是，我有一个仅包含用户 ID 的原始数据数组，但我有另一个包含用户 ID 和实际名称的数据数组。因此，在我的 table 中，我不想显示用户 ID，而是想显示实际名称。我创建了一个自定义 "formatter" 回调函数 (docs) 并且可以在 table 中显示名称，但是过滤器组件不会搜索它，因为它不是原始的一部分数据数组。

有没有其他方法可以解决这个问题，这样我也可以通过 "Assigned To" 列进行过滤器搜索？

My demo code here 单击该编辑器中的 "POSTS" link

<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";
import users from "../assets/users.json";
export default {
  data() {
    return {
      posts: [],
      users: [],
      // key name is the slot name
      fields: [
        { key: "id" },
        { key: "title" },
        { key: "body" },
        { key: "userId", 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() {
      setTimeout(
        () =>
          Promise.resolve(users).then(resp => {
            this.users = resp.data;
          }),
        1234
      );
    },
    assignNames(id) {
      const user = this.users.find(user => user.id === id);
      return user ? `${user.first_name} ${user.last_name}` : "loading...";
    }
  }
};
</script>

Answer 1

您需要在帖子和用户之上创建一个数组。准备显示所需的数据总是好的。

计算属性对此很有用。

此外，由于用户来自同步 json，因此您不需要 promise 或 setTimeout。

<script>
    import axios from "axios";
    import users from "../assets/users.json";
    export default {
        data() {
            return {
                rawPosts: [],
                // key name is the slot name
                fields: [
                    { key: "id" },
                    { key: "title" },
                    { key: "body" },
                    { key: "user", label: "Assigned To" }
                ]
            };
        },
        created() {
            this.loadPosts();
        },
        methods: {
            loadPosts() {
                axios.get("https://jsonplaceholder.typicode.com/posts").then(resp => {
                    this.rawPosts = resp.data;
                });
            },
            userFrom(id) {
                const user = users.data.find(user => user.id === id);
                return user && `${user.first_name} ${user.last_name}`;
            }
        },
        computed:{
            posts(){
                if(this.rawPosts.length && users.length){
                    return this.rawPosts.map(rawPost => ({...rawPost, user: this.userFrom(rawPost.userId)}));
                }else{
                    //loading case
                }
            }
        }
    };
</script>

Bootstrap-vue：如何使用内置的 table 过滤组件过滤第二组数据？

Bootstrap-vue: How to filter second set of data using built in table filtering component?

vue.js

bootstrap-vue