Conteúdo local do formulário de pesquisa VUE

Freqüentemente, escrevemos formulários e, em seguida, pesquisamos o formulário, a pesquisa geral pode solicitar uma pesquisa em segundo plano, a outra é pesquisar localmente na página. Aqui, eu uso a pesquisa de conteúdo local. O requisito é inserir conteúdo, combinar as colunas de id, nome, código e nota e listá-los, se houver.

Muitos dos métodos de pesquisa do Baidu não foram implementados. Eu mesmo escrevi este. Tenho que entender seu significado primeiro. Posso consultar a cópia e copiar diretamente. Estima-se que não será útil porque eu apenas postei a chave partes.

Por favor, insira o conteúdo da pesquisa e outras consultas

Botão de busca

Número de série	Eu iria	nome	Número do código	descrição da nota	Botão de operação
1	0001	Zhang San	12err	professor	Botão Excluir
2	0002	Li Si	42tt	aluna	Botão Excluir
3	0003	Wang Wu	23fffg	aluna	Botão Excluir
4	0004	Liu Liu	gff65	de outros	Botão Excluir

Complete o conteúdo da página acima sozinho. Se a página acima não for concluída, não há como completar a outra. Então, o método do botão de pesquisa vê o método sousuo () que escrevi abaixo.

Faça upload do código diretamente: 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>

Ainda não sei como restaurar os dados originais quando a pesquisa está vazia. Para maior velocidade, só consigo obter os dados solicitados em background. O efeito é o mesmo.

Na verdade, pode haver problemas ao escrever desta forma, consulte a pergunta para obter detalhes:

1. Procure a solução para a exceção: https://blog.csdn.net/bbs11007/article/details/112471695

2. A pesquisa suporta correspondência de maiúsculas e minúsculas: https://blog.csdn.net/bbs11007/article/details/112603275

3. A pesquisa oferece suporte à consulta secundária ou consulta global: https://blog.csdn.net/bbs11007/article/details/112603656

Conteúdo local do formulário de pesquisa VUE

Acho que você gosta