vue 本地搜索 js实现本地数据搜索 el-select 模糊搜索

封装好的添加链接描述

data

goodsTypeList:[],
goodsTypeListCopy :[],

methods

focus: (val) => {// 如果搜索没有数据 需要重新赋值if (!this.productCodeList.length) {this.productCodeList = this.productCodeListCopy;}//没选而且copy有值说明搜索过，下次打开只会显示之前搜索的 需要重新赋值初始数据if (!this.addObject.logisticsProductId &&this.productCodeListCopy.length) {this.productCodeList = this.productCodeListCopy;}},productFilter(val) {if (!this.goodsTypeListCopy.length) {// 先拷贝一份 后续基于这里搜索this.goodsTypeListCopy = this.goodsTypeList;}if (!val) {//搜索框没传值就重新赋值this.goodsTypeList = this.goodsTypeListCopy;return;}this.goodsTypeList = [];this.goodsTypeListCopy.length &&this.goodsTypeListCopy.forEach((item) => {if (item.需要匹配的属性.indexOf(val) != -1) {this.goodsTypeList.push(item);//把匹配到的数据push}});},

组件

<el-selectstyle="width: 150px"@focus="focus"filterable:filter-method="productFilter"@change="ProductLineChange":disabled="addObject.state == 1 || addObject.state == '' ? false : true"size="mini"v-model="addObject.shipLineId"placeholder="请选择"><el-optionv-for="item in productLineLis":key="item.id":label="item.code":value="item.id"></el-option></el-select>

vue 本地搜索 js实现本地数据搜索 el-select 模糊搜索相关推荐

html表格查找,js实现表格数据搜索
本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下表格数据搜索名称城市 Alfreds Futterkiste Germany Berglunds snabbkop S ...
vue 字典配置_vue遍历数据及字典的方法
数组:数值 {{ item.message }} 数组:数值加索引 {{ item.msg }} {{index}} 字典:key value index {{ value }} {{key}} {{ ...
Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示 1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student. ...
mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成: ...
vue 前端本地存储搜索历史记录，删除某条记录，清空记录
vue 前端本地保存搜索历史,localStorage 一.保存历史的数组是由元素组成: [ "000004 SZ"] 在页面第一次加载的时候,从localStorage中获取历史 ...
JS读取本地CSV文件数据
JS读取本地CSV文件数据文件中的部分数据如图需求是需要提取出文件的数据使用到的模块是 Papa Parse 1. 依赖安装 yarn add papaparse papaparse的基本使用可 ...
Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结二.模板语法 1.插值语法 2.指令语法三.数据绑定 1.单向数据绑定(v-bind) 2 ...
vue.js中请求数据v-for循环使用数据
1.效果图 2.cart.json {"message":"","status":"1","result&qu ...
自动完成下拉框 Select2 关键字搜索的实例（本地数据与异步获取）
为什么80%的码农都做不了架构师?>>> 最终效果首先我们要有一个基础的文本框 <input name="test" type="hidd ...

vue 本地搜索 js实现本地数据搜索 el-select 模糊搜索

vue 本地搜索 js实现本地数据搜索 el-select 模糊搜索相关推荐

最新文章

热门文章