前端使用filter实现关键词查询

àì夳堔傛蜴生んèń 2021-07-25 21:30 516阅读 0赞

如下图所示，期望实现关键词查询  
![在这里插入图片描述][20210528152750410.gif]

<template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="Date" prop="date"> </el-table-column>
        <el-table-column label="Name" prop="name"> </el-table-column>
        <el-table-column align="right">
          <template #header>
            <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
          </template>
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button >
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button >
          </template>
        </el-table-column>
      </el-table>
    </template>

给绑定值添加filter属性，由于需要动态改变，此处需要用到computed属性

<script lang="ts">
    import {  Options, Vue } from "vue-class-component";
    @Options({ 
      components: { },
      computed: { 
        tableData () { 
          return this.table.filter(
        (data: any) =>
          !this.search ||
          data.name.toLowerCase().includes(this.search.toLowerCase()) ||
          data.date.toLowerCase().includes(this.search.toLowerCase()) ||
          data.address.toLowerCase().includes(this.search.toLowerCase())
      );
        }
      }
    })
    export default class Table extends Vue { 
      public table: any = [
        { 
          date: "2016-05-02",
          name: "王小鼠",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        { 
          date: "2016-05-04",
          name: "王小牛",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        { 
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        { 
          date: "2016-05-03",
          name: "王小兔",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ];
      public search = "";
    }
    </script>

[20210528152750410.gif]: /images/20210725/a51b2b4aec0046f6a2057c7c4c91bdd1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，516人围观）

还没有评论，来说两句吧...

相关阅读

相关关键词查询-前后端交互

1.配置文件 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://ma

妖狐艹你老母/ 2024年03月22日 13:07/ 0 赞/ 17 阅读

相关 Struts（6）Struts框架中使用filter过滤关键词

public class SafeFilter extends HttpServlet implements Filter { Str

今天药忘吃喽~/ 2024年02月17日 21:44/ 0 赞/ 4 阅读

相关前端------Filter

其实数组的很多函数需要的参数都是一样的 arr.fun((item,index,arr)=>{ item:数组的元素

客官°小女子只卖身不卖艺/ 2023年09月29日 05:57/ 0 赞/ 76 阅读

相关 ElasticSearch filter查询

学习查询之前，我还是老规矩，先准备数据 Filter查询 filter是不计算相关性的，同时可以cache.因此，filter速度要快于query.

Love The Way You Lie/ 2023年07月17日 12:49/ 0 赞/ 31 阅读

相关 php实现数据查询关键词,php 关键词查询的实现方法

php关键词查询的实现方法：首先获得用户输入；然后分解用户输入的多个关键词，并存入数组中；接着根据多个关键词构建SQL语句；最后对搜索结果排序，并显示当前搜索结果即可。 ![

雨点打透心脏的1/2处/ 2023年01月15日 02:17/ 0 赞/ 98 阅读

相关前端实现模糊查询

前端实现模糊查询搜索需求： 1. 搜索框为空，默认展示下面的搜索历史，隐藏搜索列表 2. 如果用户输入搜索内容：有搜索结果展示：搜索结果，

拼搏现实的明天。/ 2022年12月10日 12:27/ 0 赞/ 264 阅读

相关 php实现多个关键词查询,PHP实现多个关键词搜索查询功能示例

PHP对于数据库的搜索主要通过使用SQL语句中的like子句来实现。如果同时搜索多个关键词，可以使用union子句来将搜索结果合并起来。以下代码实现了一个搜索页面。 $col

忘是亡心i/ 2022年11月12日 10:59/ 0 赞/ 151 阅读

相关 mysql全文索引实现搜索功能（关键词查询）

最近在做一个关键词查询功能。所以开始了解mysql的全文索引技术。接下来我将一步一步告诉大家。我是如何一步一步实现关键词检索的。 1. 了解到mysql全文检索是以词为基

电玩女神/ 2022年05月21日 05:49/ 0 赞/ 335 阅读

相关 ElasticSearch基本查询(Filter查询)

ElasticSearch基本查询(Filter查询) 1、数据准备 2、简单的过滤查询 3、bool过滤查询 4、范围过滤 5、过滤非空、判断存在 6、过滤器

阳光穿透心脏的1/2处/ 2022年02月24日 14:08/ 0 赞/ 420 阅读

相关前端使用filter实现关键词查询

如下图所示，期望实现关键词查询 ![在这里插入图片描述][20210528152750410.gif] <template> <el-table :d

àì夳堔傛蜴生んèń/ 2021年07月25日 21:30/ 0 赞/ 517 阅读