We often write forms, and then search the form, general search can request a search in the background, the other is to search locally on the page. Here I use local content search. The requirement is to input content, match the id, name, code, and note columns, and list them if they exist.
Many of Baidu's search methods have not been implemented. I wrote this one by myself. I have to understand its meaning first. I can refer to the copy and copy directly. It is estimated that it will not be useful because I only posted the key parts.
| Please enter the search content and other queries |
| Search button |
| Serial number | id | name | code number | note description | Operation button |
| 1 | 0001 | Zhang San | 12err | teacher | Delete button |
| 2 | 0002 | Li Si | 42tt | student | Delete button |
| 3 | 0003 | Wang Wu | 23fffg | student | Delete button |
| 4 | 0004 | Liu Liu | gff65 | other | Delete button |
Complete the content of the above page by yourself, if the above page is not completed, there is no way to complete the other, and then the search button method sees the sousuo() method I wrote below.
Directly upload the code: sousuoTable.vue
<style>
略
</style>
<template>
<div>
<!-- 搜索-->
<el-input v-model="search1" placeholder="请输入要搜索内容：如：id、name、code等查询" label-width="0.8rem;" style="width: 3.5rem;margin-left: 7rem;" clearable>
<el-button type="primary" @click="sousuo()" slot="append" icon="el-icon-search" style="background-color: #48BB73;color: #C1FBD7;">搜索按钮</el-button>
</el-input>
<!-- 表格,这个自己写，我的表格是自己封装的 -->
<div style="height: 5rem;margin-top: 0.225rem;width: 95%;padding-left:.31rem;">
<el-table :pages="pages1" :columns="columns1">
</el-table>
</div>
<div>
</template>
<script>
name: "sousuoTable",
data() {
return {
pages1: {
pageNum: 1,
pageSize: 50,
pages: 1,
total: 5,
values: [ //这里我是通过数据请求获得后台的数据，这里只是为了演示
{name:"张三",id:"0001",code:"12err",note:"老师"},
{name:"李四",id:"0002",code:"42tt",note:"学生"},
{name:"王五",id:"0003",code:"23fffg",note:"学生"},
{name:"刘六",id:"0004",code:"gff65",note:"其他"},
],
values1:[
]
},
columns1: [
//{ type: "selection", width: 40 },
{ type: "index", label: "序号", width: 50, sortable: true},
{ prop: "id", label: "id", minWidth: 40, sortable: true },
{ prop: "name", label: "name", minWidth: 60 },
{ prop: "code", label: "code编号", minWidth: 40 },
{ prop: "note", label: "note描述", minWidth: 70 },
{ type: "option", label: "操作按钮", width: 250,
options:[
{ type: "success", title: "删除按钮"},
]
}
],
}
}
methods: {
sousuo(){
//this.allpageValues=this.pages1.values;
//var pages = this.pages1.values1;
//this.pages1.values1 = this.pages1.values;
//为空就搜索全部
if(this.search1 =="" || this.search1 ==null){
this.sendAllLook("");//这个是我直接发送请求获取表内的所有内容的方法，不是最佳方法。不建议这么用。
}else{//搜索框不为空，搜索框的内容
let result = this.pages1.values.filter(row => {//this.pages1.values这个是表内所有数据
//搜索那列的内容，这里搜索name、id等列的内容
return row.name.indexOf(this.search1) > -1
|| row.id.indexOf(this.search1) > -1
|| row.code.indexOf(this.search1) > -1
|| row.note.indexOf(this.search1) > -1;
});
//重新设置表格数据
// this.pages1.total = result.length;
// this.pages1.pages = Math.floor(result.length / this.pages1.pageSize);
this.pages1.values = result ; //把搜索出来的展示出来
console.log("搜索结果：",result);
}
},
//发送请求，获取后台数据
sendAllLook(e){
/*这里是内部请求和接收内容的通信方法，略！！！*/
}
}
</script>I still don't know how to restore the original data when the search is empty. For speed, I can only get the data requested in the background. The effect is the same.
In fact, there may be problems when writing this way, see the question for details:
1. Search for the solution to the exception: https://blog.csdn.net/bbs11007/article/details/112471695
2. The search supports case matching: https://blog.csdn.net/bbs11007/article/details/112603275
3. Search supports secondary query or global query: https://blog.csdn.net/bbs11007/article/details/112603656