淘宝做任务网站,长沙设计公司排行榜,wordpress数据库导入插件,淘宝客网站建站源码一般搜索都是调后端的接口#xff0c;绑searchValue字段#xff08;也有可能叫其他的字段名#xff09;#xff0c;通过后端的接口进行实时搜索
如果由前端自己实现搜索过滤的话也简单
1、input事件 el-inputv-modelqueryParams.searchValueinputk…一般搜索都是调后端的接口绑searchValue字段也有可能叫其他的字段名通过后端的接口进行实时搜索
如果由前端自己实现搜索过滤的话也简单
1、input事件 el-inputv-modelqueryParams.searchValueinputkeywordChange($event) clearablestylewidth: 180px /2、绑数据源的时候根据条件判断用过滤数组还是原数组 el-tablerefelTableclassmblclassborder:datafilterList.length?filterList:datalist stylefont-size: 14px3、data中定义数据 data() {return {datalist: [],//原数组filterList:[],//过滤数组}}4、先获取原数组的数据 async getdata() {{try {const res await getlistdata()this.datalist res.data.listthis.total Number(res.data.totalRow) } catch (error) {}}},5、输入框input事件 //关键字搜索keywordChange(keywords) {this.filterList this.seachArray(this.datalist, keywords)this.total this.filterList.length},seachArray(arr, keyword) {const newArr arr.filter(item {//toUpperCase()将输入内容与对应的字段都转换为大写这样可以实现不区分大小写都能搜索到return item.code.toUpperCase().includes(keyword.toUpperCase()) || item.name.toUpperCase().includes(keyword.toUpperCase())})return newArr},
