Vue前端实现搜索功能

本是古典何须时尚 2023-02-22 05:06 25阅读 0赞

[https://blog.csdn.net/weixin\_41655541/article/details/96133804][https_blog.csdn.net_weixin_41655541_article_details_96133804]

//新弹窗搜索
    data(){
      return {
            tableData:[
                {
                  ID: "1",
                  ClientNO: "000111",
                  CloudServiceName: "王小虎",
                  Cloudnumber: "2001",
                },
            ];
            olddatas:[],
             input: "", //搜索    
        }
    
    }
    某个地方得到表格数据：
    this.olddatas = this.tableData; //先赋值给旧数据
        
    //点击搜索按钮
        search_btn() {
          let search = this.input;
          let olddatas = this.olddatas;//旧数据
          if (search == "") {
            this.tableData = olddatas
          } else {
            this.tableData = this.tableData.filter(function(item) {
              console.log("过滤", item);
              let searchField = { //我这里把item里面所有字段写进去了
                Cloudnumber: item.Cloudnumber,
                ClientName: item.ClientName,
                CloudServiceName: item.CloudServiceName,
                ID: item.ID,
              };
              return Object.keys(searchField).some(function(key) {
                console.log("key值", key);
                return (
                  String(item[key])
                    .toLowerCase()
                    .indexOf(search) > -1
                );
              });
            });
          }
        },

如果对数据中所有字段都进行排序将searchField换成product

[https_blog.csdn.net_weixin_41655541_article_details_96133804]: https://blog.csdn.net/weixin_41655541/article/details/96133804

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue-Ant Design Vue-自定义搜索功能的实现

前几篇文章介绍了[Ant Design Vue][]的部分组件使用，如，过滤，table等等。当然在中后台项目中，table是必不可少的，随之配套的就是搜索功能。应该说所...

太过爱你忘了你带给我的痛/ 2024年04月19日 11:07/ 0 赞/ 72 阅读

相关 Vue前端：几种搜索框功能实现

Vue前端：几种搜索框功能实现前言一、搜索框输入内容自动检索（1）检索到输入新的内容后，就自动向后端发送查找请求（即时搜索）

红太狼/ 2024年03月30日 14:12/ 0 赞/ 108 阅读

相关 vue前端分页功能怎么实现

![bc2da4d0171e40d7bd6a4bcd9f700623.jpeg][] Vue前端分页功能可以通过以下几个步骤实现： 1. 安装分页组件库（如vue-pag

朴灿烈づ我的快乐病毒、/ 2023年10月10日 23:50/ 0 赞/ 64 阅读

相关 vue 实现前端模糊搜索

　　最终效果是这样的：? 　　![vue 实现前端模糊搜索 \_vue 实现前端模糊搜索][vue _ _vue] 　　思路是：　　1、写一个方法过滤每一组字符串，需要

分手后的思念是犯贱/ 2023年09月25日 12:11/ 0 赞/ 34 阅读

相关 Vue前端实现搜索功能

[https://blog.csdn.net/weixin\_41655541/article/details/96133804][https_blog.csdn.net_we

本是古典何须时尚/ 2023年02月22日 05:06/ 0 赞/ 26 阅读

相关 vue实现搜索，添加，删除功能（多角度）

MVVM框架 MVVM是Model-View-ViewModel,即模型-视图-视图模型。模型是后端的数据，视图是前端的页面。其设计思想是：关注Model的变化，让MVV

偏执的太偏执、/ 2022年03月19日 11:20/ 0 赞/ 376 阅读

相关 vue实现搜索功能

> 前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是vue+element也是市面上比较常用的框架之一了，同时也花费一点时间总结一下最近的坑，react转vue的一个过程确

Love The Way You Lie/ 2022年01月22日 06:01/ 0 赞/ 405 阅读

相关实现搜索功能

1.准备视图函数search() 2.修改base.html 中搜索输入框所在的 1. <form action="\{ \{ url\_for('search') \}

墨蓝/ 2021年12月20日 11:39/ 0 赞/ 452 阅读

相关 Vue搜索功能

Vue搜索功能知识点：v-model数据双向绑定，绑定对象是input @keyup="seachup()"是键盘事件菜单列表显示搜索效果图1： ![在这

拼搏现实的明天。/ 2021年09月18日 19:40/ 0 赞/ 454 阅读

相关 Vue几行代码实现搜索功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淩亂°似流年/ 2021年08月14日 02:29/ 0 赞/ 480 阅读