Bootstrap-vue:如何使用内置的表过滤组件过滤第二组数据？
Bootstrap-vue:如何使用内置的表过滤组件过滤第二组数据？
提问于 2019-05-20 00:33:54
我正在使用Bootstrap-vue's和VueJS表组件及其过滤选项来过滤表数据。但是，引导/表过滤组件看起来只能应用于原始项数组数据，因此根据文档：https://bootstrap-vue.js.org/docs/components/table#filtering，“目前不可能基于虚拟列的自定义呈现来过滤数据”。
我的情况是，我有一个原始数据数组，其中只包含用户的ids，但我有另一个数据数组，其中包含用户的ids和实际名称。因此，在我的表中，我希望显示实际的名称，而不是显示用户in。我创建了一个自定义的“格式化程序”回调函数(docs)，可以显示表中的名称，但过滤器组件不会对其进行搜索，因为它不是原始数据数组的一部分。
有没有其他方法可以让筛选器在“分配给”列中进行搜索？
在该编辑器中单击"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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-20 01:12:46
您需要在帖子和用户之上创建一个数组。在需要显示的时候准备数据总是很好的。
计算属性对此很有帮助。
另外，因为用户来自sync 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56209853
复制相关文章
相似问题
腾讯云开发者
