VUE搜索表格的本地内容

我们经常写表格，然后对表格进行搜索，一般搜索可以向后台请求搜索，另种是页面本地进行搜索。这里我采用的是本地进行内容搜索，需求是输入内容，匹配id、name、code、note列，若存在，就列出来。

百度很多出来的搜索方法，都没有实现，我自己写的这个可以，要先理解它的意思，自己可以参照复写，直接复制估计用不了，因为我只贴了关键部分。

请输入要搜索内容等查询

搜索按钮

序号	id	name	code编号	note描述	操作按钮
1	0001	张三	12err	老师	删除按钮
2	0002	李四	42tt	学生	删除按钮
3	0003	王五	23fffg	学生	删除按钮
4	0004	刘六	gff65	其他	删除按钮

自己完成上面的页面内容，上面页面都没有完成，就没有办法完成其他，然后搜索按钮方法见我下面所写的sousuo（）方法。

直接上代码: 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>

我还不知道搜索为空的时候怎么恢复原数据，为了速度，我只能获取请求后台的数据。效果一样的。

这么写其实还可能会出问题，详见问题：

1.搜索出现的异常解决办法：https://blog.csdn.net/bbs11007/article/details/112471695

2.搜索支持大小写匹配：https://blog.csdn.net/bbs11007/article/details/112603275

3.搜索支持二次查询或者全局查询：https://blog.csdn.net/bbs11007/article/details/112603656

VUE搜索表格的本地内容

猜你喜欢