使用vue对表格数据进行查询

大家好，今天小明给大家带来一个带有查询框的表格，下面给大家瞅瞅效果图片：

从效果图上可以看出，在查询框内只要输入字母，就会出现相关的那一列；

首先大家可以先看js代码：

下面我给大家讲解一下这几行代码：

1、return this.list.filter((elem) 这行代码的意思是返回 list 数组的过滤结果；

“Filter函数（Filter function）是PHP核心的组成部分，作用是过滤。 PHP过滤器用于对来自非安全来源的数据（比如用户输入）进行验证和过滤。”可以说，filter()函数可以进行数据的查询。

2、if(elem.name.toLowerCase().indexOf(this.search.toLowerCase()) !== -1){
return elem
}

这行代码的意思是，如果list数组中的name与查询框的字母进行比较，看看其中有没有这个字母，有就可显示。

indexOf() 方法可返回某个指定的字符串值在字符串中首如果没有找到匹配的字符串则返回 -1。
判断 list数组的名字的indexOf返回值是否为-1
如果为-1，就没有比配到该人物的信息 ————————该人物不存在
如果不等于-1，就可以比配到该人物的信息 ————————该人物存在

除此之外，search是在data属性中定义的，如下图：
接下来，给大家展示一下html代码：

这行代码可以看出，我们使用 v-model 把查询框与 search 进行了数据的双向绑定，从而获取到了查询框里面的内容。

从这行代码可以看出调用chaXun（）方法，从而使查询按钮可以运行。

这是本人的第二篇文章，虽然只讲述了查询的功能，但是本人希望各位网友可以提提意见，方便本人日后改进，希望大家多多支持。如果需要这个项目的可以私聊我

使用vue对表格数据进行查询相关推荐

vue校验表格数据_如何通过数据验证限制Google表格中的数据
vue校验表格数据 If you use Google Sheets to collaborate with others, you can prevent people from typing th ...
vue 分页表格数据导出
vue分页表格数据导出功能,超简单!不用安装不用引入写个方法即可实现 //导出exportExcel() {let url = "/VueDemo/api/record/export.ht ...
标题vue导出表格数据，excel表格打不开
vue导出表格数据,excel表格打不开代码如下,当时是将**responseType: 'blob'**写在{headers: getHeader() }外面,导致问题一直没解决,后来经过度娘,了 ...
Vue：如何制作表格数据分页查询
概要我们在利用vue写后台管理项目的时候,表格会用到分页查询的功能,这次刚好我利用ant design vue需要写一个项目,那我们一起来看一下如何完成在ant design vue的表格组件中, ...
vue + element 表格数据导出为excel表格
由于业务内容的需要,我们有时候需要将表格中的数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击图中导出按钮时 ...
vue elementui表格数据
先来看一下效果: 使用template的插槽实现数据提醒关键部分: <template slot-scope="scope">{{ scope.row.student ...
vue之表格数据渲染，实现点击表格某列按钮弹出框显示剩余数据(模态框知识点）
点击按钮弹出模态框实现详情:https://blog.csdn.net/qq_20565303/article/details/78734592 结果: 代码: <template>< ...
vue实现表格的更多查询功能
场景一:一行足够显示完所有的查询条件场景二:需要多行才能显示完所有的查询条件 1.首先创建一个按钮组件SearchButton <template><el-form inline ...
【无标题】vue elementPlus表格数据导出Excel
首先下载依赖 npm install --save xlsx npm install --save file-saver npm install --save xlsx-style 引入依赖 impo ...

使用vue对表格数据进行查询

使用vue对表格数据进行查询相关推荐

最新文章

热门文章