JSON.parse --- 搜索框

一 , JSON.parse   

 this.num_normsTwo= JSON.parse(res.result.normsTwo)

二. 搜索框 

<template>
  <div class="app-container">
    <span style="margin-left:120px;margin-right: 20px;width: 100px; display: inline-block;">物资名:</span>
    <el-autocomplete
      v-model="suppliesName"
      :fetch-suggestions="querySearchName"
      placeholder="请输入内容"
      :trigger-on-focus="false"
    ></el-autocomplete>
    <br>
    <el-button type="primary" round style="margin-left:280px" @click.native.prevent="commit">添加</el-button>
    <el-button type="primary" round style="margin-left:100px" @click.native.prevent="cancel">取消</el-button>
  </div>
</template>

<script>
    export default {
      
        data() {
            return {
                suppliesName: '',  //默认是空值 
                dataList: [
                    {"id":1,"categoryTypeId":3,"name":"气象雷达","unit":"套","model":"","type":"EQUIPMENT","validPeriod":6,"createTime":"2021-07-04T15:41:19.000+0000","createUserName":"admin","updateTime":"2021-07-11T05:21:47.000+0000","isDeleted":false,"value":"气象雷达"},
                    {"id":2,"categoryTypeId":3,"name":"自动气象站","unit":null,"model":"","type":"EQUIPMENT","validPeriod":0,"createTime":"2021-07-04T16:00:47.000+0000","createUserName":"admin","updateTime":"2021-07-11T05:12:22.000+0000","isDeleted":false,"value":"自动气象站"},
                    {"id":6,"categoryTypeId":3,"name":"气象探空仪器","unit":"套","model":"","type":"SUPPLIER","validPeriod":0,"createTime":"2021-07-08T06:23:16.000+0000","createUserName":null,"updateTime":"2021-07-11T05:12:25.000+0000","isDeleted":false,"value":"气象探空仪器"},
                    {"id":9,"categoryTypeId":3,"name":"气象移动观测设备","unit":"套","model":"","type":"EQUIPMENT","validPeriod":12,"createTime":"2021-07-08T06:23:16.000+0000","createUserName":null,"updateTime":"2021-07-15T14:46:00.000+0000","isDeleted":false,"value":"气象移动观测设备"},
                    {"id":8,"categoryTypeId":4,"name":"卫星定位测量仪","unit":"套","model":"","type":"EQUIPMENT","validPeriod":24,"createTime":"2021-07-10T17:39:30.000+0000","createUserName":null,"updateTime":"2021-07-10T18:06:45.000+0000","isDeleted":false,"value":"卫星定位测量仪"}
                    ]
            }
        },
        methods: {
            // 定义方法
            querySearchName(queryString, cb){
                //存放此次查询结果
                let tmpList = []  //定义空数组
                this.dataList.forEach((item, index) => {  //循环 dataList  数据
                    // console.log("item.name", item.name)

                    if(item.name.indexOf(queryString) > -1){   // 截取你输入的文字 然后进行匹配 符合添加到tmpList 数组 展示
                        tmpList.push(item)
                    }
                    console.log("查询返回结果:", item.name.indexOf(queryString) )
                })
            
                // 调用 callback 返回建议列表的数据
                cb(tmpList);  
              
            },


            // 按钮
            commit() {
                //禁用按钮点击事件
                console.log("点击了提交按钮:", this.supplierName)
            },
            cancel() {
                this.$router.go(-1)
            },
            handleSelect(item) {
                console.log("选中了这条记录:", item);
                //todo 后续的操作,赋值、查询等
            },
        }
    }
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/139608.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【现场问题】datax中write部分为Oracle的时候插入clolb类型字段,插入的数据为string且长度过场问题

datax的Oraclewriter 报错显示查询报错展示查找datax中的数据插入模块 报错显示 occurred during batching: ORA-01704: string literal too long 查询报错展示 基本上查到的都是这样的&#xff0c;所以锁定是clob的字段类型的问题&#xff0c;而且是只有Oracle出问题&#…

竞赛 题目:垃圾邮件(短信)分类 算法实现 机器学习 深度学习 开题

文章目录 1 前言2 垃圾短信/邮件 分类算法 原理2.1 常用的分类器 - 贝叶斯分类器 3 数据集介绍4 数据预处理5 特征提取6 训练分类器7 综合测试结果8 其他模型方法9 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器学习的垃圾邮件分类 该项目…

【python】Django——django简介、django安装、创建项目、快速上手

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ Django基础——django安装、创建django项目、django快速上手 django简介django安装1. conda创建环境pydjango2. pip安装django3. django目录 创建项目1. 打开终端(cmd)2. 进入某个目录3.创建项目命令4.django项目…

MS321V/358V/324V低压、轨到轨输入输出运放

MS321V/MS358V/MS324V 是单个、两个和四个低压轨到轨输 入输出运放&#xff0c;可工作在幅度为 2.7V 到 5V 的单电源或者双电源条件 下。在低电源、空间节省和低成本应用方面是最有效的解决方案。 这些放大器专门设计为低压工作&#xff08; 2.7V 到 5V &#xff09;…

假冒 Skype 应用程序网络钓鱼分析

参考链接: https://slowmist.medium.com/fake-skype-app-phishing-analysis-35c1dc8bc515 背景 在Web3世界中&#xff0c;涉及假冒应用程序的网络钓鱼事件相当频繁。慢雾安全团队此前曾发表过分析此类网络钓鱼案例的文章。由于Google Play在中国无法访问&#xff0c;许多用户…

2023前端流行的新技术

作为2023年之前的技术水平有限&#xff0c;以下是一些目前为止较为热门的前端开发技术和趋势&#xff0c;这些技术可能在2023年之前进一步发展和普及。 前端程序员可以考虑学习和掌握以下技术&#xff1a; 1.Vue 3和React Hooks&#xff1a;Vue.js和React是目前最受欢迎的JavaS…

软文推广时应该从哪几个角度切入

数字化时代的来临改变了企业推广的方式&#xff0c;软文推广逐渐渗透企业的日常生活中&#xff0c;然而企业想要软文推广行之有效&#xff0c;就需要清晰自己推广的产品和品牌信息&#xff0c;将信息进行明确规划后根据相应的需求进行推广&#xff0c;这也是今天媒介盒子和大家…

Java编程--定时器/线程池/工厂模式/ ThreadPoolExecutor

前言 逆水行舟&#xff0c;不进则退&#xff01;&#xff01;&#xff01; 目录 什么是定时器 实现一个定时器 自己实现一个定时器 什么是线程池 线程池的使用&#xff1a; 什么是工厂模式&#xff1f; 自己实现一个线程池&#xff1a; ThreadPoolExecutor 类…

【设计模式】策略模式

引例 方案一 说明&#xff1a; 不满足OCP&#xff0c;添加新的排序算法或修改某个已有排序算法需要重新编译整个类可复用性差&#xff0c;Sorting类不可被直接复用 方案二 将客户类和算法类分开 说明&#xff1a;Sorting类可复用&#xff0c;但Sorting类仍不满足OCP 方案三…

用户日期格式不一致导致BDC报时间格式不一致问题

问题描述 在做销售开票的功能时用的BDC&#xff0c;业务在测试的时候总是报日期格式不一致的错误&#xff0c;而我自己测的时候却没啥问题&#xff0c;调试的时候发现是我和业务的时间格式不一致&#xff08;我是YYYYMMDD,他是MMDDYYYY&#xff09;。 解决方案 用函数CONVERT…

解析浏览器的事件循环机制:理解JavaScript运行时的执行顺序

解析浏览器的事件循环机制&#xff1a;理解JavaScript运行时的执行顺序 前言定义执行顺序异步任务概念&#xff1a;微任务、宏任务宏任务有哪些&#xff1f;微任务有哪些 实例代码与图解 前言 因为防止在多个用户同时在浏览器中操作一个DOM节点所带来的复杂性&#xff0c;故Ja…

管理压力:打工人不难为打工人

写在前面 让时间回到2018年7月末&#xff1a; 事件地点&#xff1a;中国平安办公室 事件经过&#xff1a; 平安产品经理提出一个需求&#xff0c;要求APP开发人员根据用户手机壳自动调整颜色的主题。这个需求被程序员认为是不合理的。双方开始争论&#xff0c;情绪激动&…

【Transformer从零开始代码实现 pytoch版】(五)总架构类的实现

Transformer总架构 在实现完输入部分、编码器、解码器和输出部分之后&#xff0c;就可以封装各个部件为一个完整的实体类了。 【Transformer从零开始代码实现 pytoch版】&#xff08;一&#xff09;输入部件&#xff1a;embeddingpositionalEncoding 【Transformer从零开始代…

IP-guard WebServer 命令执行漏洞复现

简介 IP-guard是一款终端安全管理软件&#xff0c;旨在帮助企业保护终端设备安全、数据安全、管理网络使用和简化IT系统管理。在旧版本申请审批的文件预览功能用到了一个开源的插件 flexpaper&#xff0c;使用的这个插件版本存在远程命令执行漏洞&#xff0c;攻击者可利用该漏…

动作捕捉系统通过VRPN与ROS系统通信

NOKOV度量动作捕捉系统支持通过VRPN与机器人操作系统ROS通信&#xff0c;进行动作捕捉数据的传输。 一、加载数据 打开形影动捕软件&#xff0c;加载一段后处理数据。 这里选择一段小车飞机的同步数据。在这段数据里面&#xff0c;场景下包含两个刚体&#xff0c;分别是小车和…

1688商品详情API接口的使用方法、注意事项以及示例代码

1688商品详情API接口使用方法 1688商品详情API接口是1688平台提供的用于获取商品详细信息的接口。通过该接口&#xff0c;您可以获取到商品的ID、名称、价格、销量、评价等信息&#xff0c;从而进行进一步的数据分析和应用开发。本文将介绍1688商品详情API接口的使用方法、注意…

python爬虫top250电影数据

之前看到的&#xff0c;我改了一下&#xff0c;多了很多东西 import requests from bs4 import BeautifulSoup from openpyxl import Workbook from openpyxl.styles import Font import redef extract_movie_info(info):# 使用正则表达式提取信息pattern re.compile(r导演:…

react函数式组件props形式子向父传参

父组件中定义 子组件中触发回调传值 import { useState } from "react"; function Son(params) {const [count, setCount] useState(0);function handleClick() {console.log(params, paramsparamsparamsparamsparamsparams);params.onClick(111)setCount(count 1…

猫罐头怎么选择?精选的5款口碑好的猫罐头推荐!

猫罐头因其成分约80%为水分&#xff0c;对于不喜欢喝水的猫咪来说&#xff0c;正是可以用来补充水分的替代方案。 而近年来市面上也有越来越多讲究食用安全性的猫罐头&#xff0c;像是强调无添加多余加工品、或是不含谷物成分等的商品。但也因为种类过多&#xff0c;让铲屎官容…

k8s系列文章二:集群配置

一、关闭交换分区 # 临时关闭分区 swapoff -a # 永久\关闭自动挂载swap分区 sudo sed -i / swap / s/^\(.*\)$/#\1/g /etc/fstab 二、修改cgroup管理器 ubuntu 系统&#xff0c;debian 系统&#xff0c;centos7 系统&#xff0c;都是使用 systemd 初始化系统的。systemd 这边…