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

Question

我有一个数据表列表，我想搜索客户名称。客户名称是从客户表（关系）中获取的。我在代码上尝试了更多时间，但是没有处理。很抱歉，因为我是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>

Answer 1

如果我对您的理解正确，则需要一种在前端过滤表的方法。尝试执行此操作的一种方法是让计算变量返回已过滤列表。

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

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

如果您要在其他地方使用此搜索功能，也可以查看filters