Bootstrap-vue:如何使用内置表过滤组件过滤第二组数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (25)

我正在使用VueJS和Bootstrap-vue的表组件及其过滤选项来过滤表数据。但是,看起来Bootstrap / Table过滤组件只能应用于原始项目数组数据,因此根据文档说明“目前无法根据虚拟列的自定义呈现过滤数据”: https:// bootstrap -vue.js.org/docs/components/table#filtering

我的情况是我有一个原始的数据数组,只包含用户ID,但我有另一个数据数组,其中包含用户的ID和实际名称。因此,在我的表中,我想显示实际的名称,而不是显示用户ID。我创建了一个自定义的“格式化程序”回调函数(docs)并可以在表中显示名称,但由于过滤器组件不属于原始数据数组,因此不会搜索该组件。

有没有其他方法可以解决这个问题,所以我也可以通过“Assigned To”列进行过滤搜索?

我的演示代码点击该编辑器中的“POSTS”链接

<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>
提问于
用户回答回答于

您需要在帖子和用户之上创建一个数组。准备数据是非常好的,因为它们是显示所需的。

计算属性对此有好处。

此外,由于用户来自同步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.first_name} ${user.last_name}`;
            }
        },
        computed:{
            posts(){
                if(this.rawPosts && users){
                    return this.rawPosts.map(rawPost => ({...rawPost, user: this.userFrom(rawPost.userId)}));
                }else{
                    //loading case
                }
            }
        }
    };
</script>

扫码关注云+社区

领取腾讯云代金券