列表过滤功能

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

实现的前端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('')是真