【前端模糊查询】vue用elementul表格，前端写模糊查询功能，简单实现方法

效果图

代码

html

      <el-table:data="tableData"stripestyle="width: 100%; margin-bottom: 30px"size="mini"height="480px"><el-table-column prop="date" label="日期" min-width="180"></el-table-column><el-table-column prop="video" label="视频" min-width="180"></el-table-column><el-table-column prop="images" label="图片"> </el-table-column><el-table-column prop="download" label="下载"><template slot-scope="scope"><el-buttonsize="mini"type="primary"@click="download_erweima(scope.row)">生成二维码</el-button></template></el-table-column></el-table>

data：这是模拟的，后台拿的数据也一样再弄一个变量赋值一份

      //表格tableData: [{date: "2016-05-01",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-02",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-03",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-04",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-05",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-01",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-02",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-03",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-04",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-05",video: "A1.MPG",images: "A1.ZIP",},],tableDatas: [{date: "2016-05-01",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-02",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-03",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-04",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-05",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-01",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-02",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-03",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-04",video: "A1.MPG",images: "A1.ZIP",},{date: "2016-05-05",video: "A1.MPG",images: "A1.ZIP",},],//搜索框输入值search_erweima: "",

methods：这个是方法

解释一下：search_erweima是搜索输入的值。然后判断是否为空，空就把备份数据赋值给tableData 以此达到让表格恢复原状的目的，如果不是空的就是有值，那就根据这个值filter筛选一下把条件为true的数据返回，includes方法是判断这个输入的值是否在数据中存在，如果有就返回true。这就搞定了。

    inquire() {let fuzzy = this.search_erweima;if (fuzzy) {this.tableData = this.tableDatas.filter((item) => {return item.date.includes(fuzzy)});} else {this.tableData = this.tableDatas;}},

如果你需要多个条件判断写法
像这样加个&&号然后改下就行了，同理如果你需要多个条件，但是只要满足一个就行那就换成 ||

    inquire() {let fuzzy = this.search_erweima;if (fuzzy) {this.tableData = this.tableDatas.filter((item) => {return item.date.includes(fuzzy)&&item.age.includes(fuzzy)});} else {this.tableData = this.tableDatas;}},

【前端模糊查询】vue用elementul表格，前端写模糊查询功能，简单实现方法相关推荐

vue项目+element表格前端使用纯js导出word文档
详细请读https://www.jianshu.com/p/0de31429b12a这篇文章首先安装各种工具: -- 安装 docxtemplater cnpm install docxtempla ...
vue可填写表格_VUE写一个简单的表格实例
目录: 1.脚本式开发. 2.工程化开发 3.工程化和脚本的区别 4.来个table试试水 4,1.目标 4.2.思路 4.3.设计与编码 4.4.效果 5.业务分离 6.功能拓展--个性化设置正文 ...
基于Spring Boot+Vue的博客系统 16——热门文章功能简单的实现
废弃说明: 这个专栏的文章本意是记录笔者第一次搭建博客的过程,文章里里有很多地方的写法都不太恰当,现在已经废弃,关于SpringBoot + Vue 博客系列,笔者重新写了这个系列的文章,不敢说写的好 ...
mysql查询上班打卡sql怎么写_sql查询一段时期里每一天所有员工的打卡记录
先有一个表格,内容非常多,如图所示,但是只需查询所有员工的早晚打卡记录.本人已实现所有员工在指定某一天的最早和最晚的打卡记录.现在需要实现的日期增加了.现在要查询的是所有员工从... 先有一个表格,内 ...
Latex表格内容过长，最简单自动换行方法
在用Texstudio编写表格,遇到表格无法换行的问题,查了一大堆方法都不好用,最后参考icode9上的一篇博文才找到最简便的方法,分享给大家. 错误情况可以看到,第二列内容太长,导致第三列的内容都 ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
前端JS实现一键导入excel表格
前端JS实现一键导入excel表格前端JS实现一键导入excel表格前端JS实现一键导入excel表格前面的文章中已经讲过关于js表格的导出,此文章主要说到的是excel文件如何导入到网页中,并 ...
element 问号提示_vue实现element表格里表头信息提示功能(推荐)
如图:在element表格操作一栏需要添加提示功能实现效果如图:鼠标浮上去弹出tips 解决方案 1.编写组件在 promptMessage.vue 文件里面实现 {{item}} export ...
vue实现导入表格数据【纯前端实现】
一.文章引导 #mermaid-svg-j9HOnISPE2Hyb9Zj {font-family:"trebuchet ms",verdana,arial,sans-serif; ...

【前端模糊查询】vue用elementul表格，前端写模糊查询功能，简单实现方法

效果图

代码

html

data：这是模拟的，后台拿的数据也一样再弄一个变量赋值一份

methods：这个是方法

【前端模糊查询】vue用elementul表格，前端写模糊查询功能，简单实现方法相关推荐

最新文章

热门文章