Vue：数据表上的搜索过滤器答案

【问题标题】：Vue: Search filter on data tableVue：数据表上的搜索过滤器
【发布时间】：2020-05-16 21:15:35
【问题描述】：

我有一个数据表列表，我想搜索客户的姓名。客户的姓名是从客户表（关系）中获取的。我在我的代码上尝试更多时间，但这不是过程。很抱歉，因为我是 Vue js 的新手。

文本字段

<div>
  <v-text-field
    label="Search Customer"
    solo 
    outlined
    dense
    v-model="search"
  ></v-text-field>
</div>

脚本

<script>
  export default {

	created() {
		this.fetchSearch();
	},

	watch: {
		search: {
			handler() {
				this.fetchSearch()
			}
		},
		deep: true,
	},

	data() {
		return {
			items: [],
			search: '',
		}
	},

	methods: {
		fetchSearch(){
			this.$axios.$get(`/api/return-sale?search=${this.search}`)
			.then(res =>{
				this.items = res.returnsale.data;
				console.log(res);
			})
			.catch(err =>{
				console.log(err.response);
			})
		},
	}
}

</script>

【问题讨论】：

您是否使用任何 ui 框架，如 bootstrap-vue/vuetify 或数据表的特定组件？
@George Alvis 是的，在 bootstrap-vue/vuetify 上的先生。
该视图上的表格显示是什么？
@GeorgeAlvis 它显示在与客户表有关系的退货销售表上。我想在退货时搜索客户的姓名。
那么您是否从 api 获得任何结果？这有点不清楚哪个部分“不起作用”？请说明您遇到问题的代码部分。

标签： laravel vue.js nuxt.js

【解决方案1】：

如果我理解正确，您需要一种在前端过滤表格的方法。您可以尝试的一种方法是使用一个计算变量来返回过滤后的列表。

computed: {
 tableItems () {
   if (!this.search) {
    return this.items;
   }

   return this.items.filter(item => item.custormer.indexOf(this.search) > -1)
 }
}

如果您打算在不同的地方使用此搜索功能，也可以查看filters

【讨论】：

我试了你的，但它不起作用，也没有显示任何错误。
你能告诉我们你是如何展示表格的代码吗？

【解决方案2】：

您可以通过 this.items 的 watch 属性创建一个函数并过滤数据

watch: {
  search() {
    const data = this.items
    if (this.search.length > 0) { 
      if (data.filter(item => item.custormerName === this.search)) { 
        this.items = data.filter(item => item.custormerName === this.search);
      } else {
        this.search = '';
        this.fetchSearch();
      }
    } else {
      this.fetchSearch();
    }
  }
}

【讨论】：