一般来说全局搜索都是由后端负责逻辑的,由于最近想尝试下新的方向,就学着用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) {