zoukankan      html  css  js  c++  java
  • vue---数据列表过滤筛选

    使用vue进行数据过滤筛选是比较常用的功能,常见的使用场景就是搜索框数据筛选过滤了。简单示例:

    <template>
      <div>
        <input type="text" v-model="search">
        <ul>
          <!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list数组 -->
          <li v-for="(item,index) in items">
            <span>{{item.name}}</span>
            <span>{{item.msg}}</span>
            <span>{{item.age}}</span>
            <span>{{item.title}}</span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "DataForm", 
      data() {
        return {
          search:'',
          list:[
            {id:0,name:'AAA',msg:'aaa文本介绍1',title:'水电费',age:366},
            {id:1,name:'BBB',msg:'bbb文本介绍2',title:'赵子龙',age:235},
            {id:2,name:'CCC',msg:'ccc文本介绍3',title:'赵性',age:587},
            {id:3,name:'DDD',msg:'ddd文本介绍4',title:'展飞',age:654},
            {id:4,name:'EEE',msg:'eee文本介绍5',title:'收费',age:987},
            {id:5,name:'FFF',msg:'Aa文本介绍6',title:'收费',age:6985},
          ]
        };
      },
      computed:{
        // 筛选指定字段
        items:function(){
          let _search = this.search;
          let reg = new RegExp(_search, 'ig');// 不区分大小写
          if(_search){
            return this.list.filter(function(item){
              if((item.id.toString().indexOf(_search) != -1) || item.msg.match(reg) || (item.age.toString().indexOf(_search) != -1)){
                return item;
              }
            });
          }
          return this.list;
        },
        // 筛选所有的字段
        itemss: function() {
          var _search = this.search;
          console.log(_search);
          if(_search){
            // 不区分大小写处理
            var reg = new RegExp(_search, 'ig')
            // es6 filter过滤匹配,有则返回当前,无则返回所有
            return this.list.filter(function(e) {
              // 匹配所有字段
              return Object.keys(e).some(function(key) {
                return e[key].match(reg);
              })
              // 匹配某个字段
              // return e.name.match(reg);
            })
          };
          return this.list;
        }
      }
    };
    </script>
  • 相关阅读:
    「UVA12293」 Box Game
    「CF803C」 Maximal GCD
    「CF525D」Arthur and Walls
    「CF442C」 Artem and Array
    LeetCode lcci 16.03 交点
    LeetCode 1305 两棵二叉搜索树中的所有元素
    LeetCode 1040 移动石子直到连续 II
    LeetCode 664 奇怪的打印机
    iOS UIPageViewController系统方法崩溃修复
    LeetCode 334 递增的三元子序列
  • 原文地址:https://www.cnblogs.com/e0yu/p/10880478.html
Copyright © 2011-2022 走看看