首页 > 其他 > 详细

列表过滤功能

时间:2020-07-15 00:47:15      阅读:40      评论:0      收藏:0      [点我收藏+]

功能场景:从后端获取所有的数据并渲染到表格后,需要对这些数据进行查找筛选

实现的前端demo

技术分享图片

 

 

input标签绑定数据 keyword

<Row>
  <Col span="4">
    <Input v-model="keyword" search enter-button placeholder="输入关键字,支持topic名/申请人/部门" />
  </Col>
</Row> 

 

表格组件数据绑定函数,函数的参数和input中的v-model绑定的数据一致

<Table border :columns="topicColumns" :data="searchTopicData(keyword)">

函数定义

// 表格搜索函数,可支持多列搜索
        searchTopicData(keyword){
            return this.topicData.filter(item=>{
                if (item.topicName.includes(keyword)
||item.depart.includes(keyword)){
                    return item
                }
            })
        },

1. 表格数据是数组类型,元素是字典类型

[{"topicName":"","depart":""},...]

2. filter会遍历数组中的每个元素,其内层是箭头函数,参数item是每个元素

3. 字符串的includs方法会判断是否包含输入的关键字,如果条件为真则保留item

4. 最终会返回一个符合条件的新的数组

5. 如果关键字为空则会返回完整的数组,因为str.includes(‘‘)是真

列表过滤功能

原文:https://www.cnblogs.com/Bccd/p/13301740.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!