网站建设广州,磁力多多,工程人才招聘网,天津西青区旅游景点大全2023.8.16今天我学习了如何使用前端进行数据的查询#xff0c;有时候后端会直接返回全部的数据#xff0c;这时候我们就需要用前端进行查找数据。
首先elementUI有自带el-table查询的组件#xff1a;
Element - The worlds most popular Vue UI framework 我们发现在这段代…2023.8.16今天我学习了如何使用前端进行数据的查询有时候后端会直接返回全部的数据这时候我们就需要用前端进行查找数据。
首先elementUI有自带el-table查询的组件
Element - The worlds most popular Vue UI framework 我们发现在这段代码中使用了 filter() 方法对 tableData 进行筛选。筛选的条件是如果 search 为空或者为假值那么返回 true否则检查 data.name 是否包含了 search不区分大小写。如果筛选条件为真则保留该数据项否则将其过滤掉。这样通过绑定这个表达式到 :data 属性可以将筛选后的结果作为数据传递给一个组件或其他地方进行展示。
但是我们不希望在原有的:data进行改变我们可以将方法写在input中。
templatedivel-input inputsearch_input v-modelsearch/el-table :datatypeList/el-table/div
/templatescript
export default{data(){return{typeList:[{id:1,name:张三},{id:2,name:李四},{id:3,name:王五},],search:}},methods:{search_input(){//通过name字段进行筛选this.typeList this.typeList.filter(data !this.search||data.name.toLowerCase().includes(this.search.toLowerCase()))}}
}/script
这样就实现了单个查询的方法。我们也可以进行多个字段的查询
templatedivel-input inputsearch_input v-modelsearch1/el-input inputsearch_input v-modelsearch2/el-table :datatypeList/el-table/div
/templatescript
export default{data(){return{typeList:[{id:1,name:张三,age:10},{id:2,name:李四,age:20},{id:3,name:王五,age:30},],search1:,search2:}},methods:{search_input(){//通过name和age字段进行筛选this.typeList this.typeList.filter(data !this.search1||data.name.toLowerCase().includes(this.search1.toLowerCase())).filter(data !this.search2|| data.age.toLowerCase().includes(this.search2.toLowerCase()))}}}/script
