功能场景:从后端获取所有的数据并渲染到表格后,需要对这些数据进行查找筛选
实现的前端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