JSON.parse --- 搜索框

news2024/11/20 9:35:11

一 , 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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大语言模型可以学习规则11.13

大型语言模型可以学习规则 摘要1 引言2 准备3 从假设到理论3.1 诱导阶段&#xff1a;规则生成和验证3.2 演绎阶段&#xff1a;使用规则库进行显式推理 4 实验评估实验装置4.2 数字推理 5 相关工作 摘要 当提示一些例子和中间步骤时&#xff0c;大型语言模型&#xff08;LLM&am…

【网络豆送书第六期】《嵌入式虚拟化技术与应用》

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 公众号&#xff1a;网络豆云计算学堂 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a; 网络豆的主页​​​​​ 本期好书推荐&#xff1a;《嵌入式虚拟化技术与应用…

面试 | 再也不怕被问 Binder 机制了

Binder 机制 Binder 机制是 Android 特有的一种进程间通信&#xff08;IPC&#xff09;方式 1.1 Binder 机制的作用和原理&#xff1f; Linux系统将一个进程分为用户空间和内核空间。对于进程之间来说&#xff0c;用户空间的数据不可共享&#xff0c;内核空间的数据可共享&a…

Django下的Race Condition漏洞

目录 环境搭建 无锁无事务的竞争攻击复现 无锁有事务的竞争攻击复现 悲观锁进行防御 乐观锁进行防御 环境搭建 首先我们安装源码包&#xff1a;GitHub - phith0n/race-condition-playground: Playground for Race Condition attack 然后将源码包上传到Ubuntu 为了方便使…

python双端队列_中间是头两边是尾_两边是头中间是尾

双端队列的顺序表存储结构以及两种特殊的双端队列 双端队列 是一种允许我们同时从前端和后端添加和删除元素的特殊队列&#xff0c;它是队列和栈的结合体。 双端队列&#xff08;deque&#xff09;与队列&#xff08;queue&#xff09;就差了两个字&#xff0c;队列里元素只能…

uniapp——项目day04

购物车页面——商品列表区域 渲染购物车商品列表的标题区域 1. 定义如下的 UI 结构&#xff1a; 2.美化样式 渲染商品列表区域的基本结构 1. 通过 mapState 辅助函数&#xff0c;将 Store 中的 cart 数组映射到当前页面中使用&#xff1a; import badgeMix from /mixins/tab…

2023年【建筑电工(建筑特殊工种)】找解析及建筑电工(建筑特殊工种)复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 建筑电工(建筑特殊工种)找解析是安全生产模拟考试一点通生成的&#xff0c;建筑电工(建筑特殊工种)证模拟考试题库是根据建筑电工(建筑特殊工种)最新版教材汇编出建筑电工(建筑特殊工种)仿真模拟考试。2023年【建筑电…

1 Supervised Machine Learning Regression and Classification

文章目录 Week1OverViewSupervised LearningUnsupervised LearningLinear Regression ModelCost functionGradient Descent Week2Muliple FeatureVectorizationGradient Descent for Multiple RegressionFeature ScalingGradient DescentFeature EngineeringPolynomial Regress…

数据结构线性表——栈

前言&#xff1a;哈喽小伙伴们&#xff0c;今天我们将一起进入数据结构线性表的第四篇章——栈的讲解&#xff0c;栈还是比较简单的哦&#xff0c;跟紧博主的思路&#xff0c;不要掉队哦。 目录 一.什么是栈 二.如何实现栈 三.栈的实现 栈的初始化 四.栈的操作 1.数据入栈…

CTFhub-RCE-读取源代码

源代码&#xff1a; <?php error_reporting(E_ALL); if (isset($_GET[file])) { if ( substr($_GET["file"], 0, 6) "php://" ) { include($_GET["file"]); } else { echo "Hacker!!!"; } } else {…

重磅!2024QS亚洲大学排名出炉!北大蝉联榜首,港大反超新国立、清华!

2023年11月8日&#xff0c;全球高等教育分析机构QS Quacquarelli Symonds发布了2024年QS世界大学排名&#xff1a;亚洲大学排名。 本次排名全方位评估了来自亚洲25个国家和地区的856所大学在全球认可度、研究实力、教学资源和国际化等方面的表现&#xff0c;有148所院校首次跻…

绝望了,软件测试的行业基本盘,崩了......

不得不承认&#xff0c;现在工作不好找 去年很多人都觉得今年的就业环境会好很多&#xff0c;但是到了现在都发现之前想错了&#xff0c;实际上是一塌糊涂… 于是有了很多年轻人焦虑日常的灵魂一问&#xff1a;“快半年了&#xff0c;找不到工作&#xff0c;我好焦虑&#xf…

Git的GUI图形化工具ssh协议IDEA集成Git

一、GIT的GUI图形化工具 1、介绍 Git自带的GUI工具&#xff0c;主界面中各个按钮的意思基本与界面文字一致&#xff0c;与git的命令差别不大。在了解自己所做的操作情况下&#xff0c;各个功能点开看下就知道是怎么操作的。即使不了解&#xff0c;只要不做push操作&#xff0c…

LeetCode-剑指 Offer 22. 链表中倒数第k个节点(C语言 )

目录捏 一、题目描述二、示例与提示三、思路四、代码 一、题目描述 给定一个头节点为 head 的链表用于记录一系列核心肌群训练项目编号&#xff0c;请查找并返回倒数第 cnt 个训练项目编号。 二、示例与提示 示例 1&#xff1a; 输入&#xff1a; head [2,4,7,8], cnt 1 输…

Linux 源码包安装

SRPM 包&#xff0c;比 RPM 包多了一个“S”&#xff0c;是“Source”的首字母&#xff0c;所以 SRPM 可直译为“源代码形式的 RPM 包”。也就是说&#xff0c;SRPM 包中不再是经过编译的二进制文件&#xff0c;都是源代码文件。可以这样理解&#xff0c;SRPM 包是软件以源码形…

新生儿母乳过敏:原因、科普和注意事项

引言&#xff1a; 母乳过敏是一种较为罕见但可能令家长担忧的现象。母亲通常认为母乳是新生儿最安全、最适合的食物&#xff0c;然而有时候宝宝可能对母乳中的某些成分产生过敏反应。本文将科普新生儿母乳过敏的原因&#xff0c;提供相关信息&#xff0c;并为父母和监护人提供…

轻量封装WebGPU渲染系统示例<27>- 浮点RTT纹理(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/FloatRTT.ts 当前示例运行效果: 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下: const floatRTT { diffuse: { uuid: "rtt0", rttTe…

SPC on-line 应用探讨

中国是制造业大国&#xff0c;大部分工厂主要重点是将原料经由加工制造过程&#xff08;或流程&#xff09;转变为最终可销售的产品或服务。”产品”是经过被定义的规格下&#xff08;定义规格者包含客户、制造商本身、供应商…等&#xff09;&#xff0c;在经过”受控制”的人…

Linux C 进程编程

进程编程 进程介绍进程的定义进程和线程以及程序的区别进程块PCB进程的状态相关指令 进程调度算法先来先服务调度算法 FCFS短作业(进程)优先调度算法 SJF优先权调度算法 FPF优先权调度算法的类型非抢占式优先权算法抢占式优先权算法 优先权类型静态优先权动态优先权 高响应比优…