vue + flask 做一个全局搜索(左匹配和模糊搜索)

一般来说全局搜索都是由后端负责逻辑的,由于最近想尝试下新的方向,就学着用vue来实现搜索,而后端接口只负责返回所有数据。该功能为在表格里面,搜索符合条件的字段,并重新渲染el-table的 :data=tableData,强行使符合条件的device被渲染出来。重点部门在代码每个method都有注释。
对于搜索框,我采用了el-autocomplete来实现,template的代码如下:

<template>
<div class="handle-box">
                <el-autocomplete
                 v-model="select_word"
                 clearable
                 placeholder="筛选关键词"
                 class="handle-input mr10"
                 :fetch-suggestions="querySearchAsync"
                 :trigger-on-focus="false"></el-autocomplete>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="success" @click="reset">重置</el-button>
   </div>
   </template>

script方面的代码如下:

export default {
	data() {
		return  {
			select_word: '',
			searchList: [],
			 timeout:  null,
            search_result: ''
		}
	},
	mounted() {
			this.searchList = this.loadAll()
		},
	methods: {
			// 异步查询
			querySearchAsync(queryString, cb) {
		        var searchList = this.searchList;
		        var results = queryString ? searchList.filter(this.createFilter(queryString)) : searchList;
		        this.search_result = results

		        clearTimeout(this.timeout);
		        this.timeout = setTimeout(() => {
		          cb(results);
		        }, 1);
		      },
		 // el-autocomplete只接受value作绑定,所以后端返回数据的时候用value绑定设备的名字,
		 //后面做全局搜索的时候,不管输入什么,只会出来相应的设备的名字,
		 //但是该设备绑定其他的信息也可以被搜索到
        createFilter(queryString) {
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值