Vue 2 + Element UI 选择一个el-select清空另一个el-select选中的值

news2024/11/24 14:47:07

需求:表单中有两个下拉选择器,先选中第一个,清空第二个选中的值

尝试过this.$refs['form'].resetFields('field name');全都失效!

效果图如下: 

 

 先选择商品分类,再去选择商品列表中的某一件商品 

<el-form-item label="商品分类">
                <el-select v-model="form.goodsSort" clearable placeholder="请选择商品分类" @change="searchGoodsList">
                    <el-option v-for="item in goodsSortOpt" :key="item.optVal" :label="item.label"
                        :value="item.optVal" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品列表">
                <el-select v-model="form.goodsId" clearable filterable placeholder="请选择商品列表" popper-class="goodsSort" @change="changeGoods">
                    <el-option v-for="item in goodsOpt" :key="item.id" :label="item.goodsName"
                        :value="item.id" />
                </el-select>
            </el-form-item>

js部分代码

searchGoodsList(item){//根据商品分类查找商品列表
    delete this.form.goodsId     
},

处理方式是:删除掉需要删除的下拉组件绑定的表单id

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

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

相关文章

GDPU JavaWeb Ajax请求

异步请求可以提升用户体验并优化页面性能。 ajax登录 实现ajax异步登录。 注意&#xff0c;ajax用到了jQuery库&#xff0c;先下载好相应的js库&#xff0c;然后复制导入到工程的web目录下&#xff0c;最好与你的前端页面同一层级。然后编写时路径一定要找准&#xff0c;“pag…

天才程序员周弈帆 | Stable Diffusion 解读(一):回顾早期工作

本文来源公众号“天才程序员周弈帆”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;Stable Diffusion 解读&#xff08;一&#xff09;&#xff1a;回顾早期工作 在2022年的这波AI绘画浪潮中&#xff0c;Stable Diffusion无疑是最…

视频去水印电脑版,视频去水印软件

视频去水印怎么去&#xff0c;一直是视频编辑者们的热门话题。那么&#xff0c;如何去除频水印呢&#xff1f;接下来&#xff0c;我们将为您详细介绍视频去水印方法。 第一种方法&#xff1a; 首先通过浏览器打开 “ 51视频处理官网” 的网站。打开网站后&#xff0c;我们上传…

C语言---枚举位运算

枚举的定义&#xff1a; 一枚枚的列举 //一个个的列举 枚举的语法&#xff1a; enum 枚举名 { 枚举常量//名字 }&#xff1b; 例子&#xff1a; enum weekay { MON&#xff0c; TUES; WED; THURS; FRI; SAT; SUN;//枚举常量 }; 注意&#xff1a; 1、C语言中…

数据库(28)——联合查询

对于union查询&#xff0c;就是把多次查询的结果合并起来&#xff0c;形成一个新的查询结果集。 语法 SELECT 字段列表 FROM 表A... UNION [ALL] SELECT 字段列表 FROM 表B...; 演示 select * from user where age > 22 union all select * from user where age < 50; u…

消息队列笔记

异步技术 企业级应用中广泛使用的三种异步消息传递技术 原文链接&#xff1a;https://blog.csdn.net/qq_55917018/article/details/122122218 三种异步消息传递技术 JMS (java message service) 一个Java规范&#xff0c;等同于JDBC规范&#xff0c;提供了与消息服务相关的…

tcp aimd 窗口的推导

旧事重提&#xff0c;今天用微分方程的数值解观测 tcp aimd 窗口值。 设系统 AI&#xff0c;MD 参数分别为 a 1&#xff0c;b 0.5&#xff0c;丢包率由 buffer 大小&#xff0c;red 配置以及线路误码率共同决定&#xff0c;设为 p&#xff0c;窗口为 W&#xff0c;则有&…

docker部署skywalking

skywalking版本下载 1&#xff1a;拉取skywalking的oap镜像(可以选择自己的版本&#xff0c;最好与ui&#xff0c;agent版本一致) docker pull apache/skywalking-oap-server:9.5.02&#xff1a;启动oap docker run -d -p 11800:11800 -p 12800:12800 --name sw_oap apache/…

【介绍下R-tree,什么是R-tree?】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

前端渲染大量数据思路【虚拟列表】【异步机制】

当浏览器遇到性能瓶颈导致页面卡顿时&#xff0c;你会怎么处理&#xff1f;如何查找问题的原因&#xff1f; 浏览器本身自带性能检测工具&#xff0c;通常我们分析由脚本导致的页面卡顿会选择 性能&#xff08;performance&#xff09; 选项卡&#xff0c;在其中我们可以找到导…

嵌入式linux系统中利用I2C控制器应用开发详解

大家好,今天主要给大家分享一下,在linux系统上如何使用I2C进行应用开发详解。 l2C (Inter一Integrated Circuit BUS)是I2C BUS简称.中文为集成电路总线.是目前应用最广泛的总线之一。和IMX6ULL有些相关的是.刚好该总线是NXP前身的PHLIPS 设计。 第一:I2C协议概述 …

C++基础编程100题-007 OpenJudge-1.3-05 计算分数的浮点数值

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0103/05/ 描述 两个整数a和b分别作为分子和分母&#xff0c;既分数 a/b &#xff0c;求它的浮点数值&#xff08;双精度浮点数&#xff0c;保留小数点后9位&#xff09; 输入 输入仅一行&#xff0c;包括两个…

Postman 连接数据库 利用node+xmysql

1、准备nodejs环境 如果没有安装&#xff0c;在网上找教程&#xff0c;安装好后&#xff0c;在控制台输入命令查看版本&#xff0c;如下就成功了 2、安装xmysql 在控制台输入 npm install -g xmysql 3、连接目标数据库 帮助如下&#xff1a; 示例&#xff1a; 目标数据库…

新品发布 | 飞凌嵌入式RK3562J核心板,智能工业时代的国产智慧引擎

飞凌嵌入式推出FET3562J-C全国产核心板&#xff0c;专为工业自动化及消费类电子设备设计&#xff0c;打造智能工业时代的国产智慧新引擎。 FET3562J-C核心板基于Rockchip RK3562J处理器开发设计&#xff0c;该处理器采用22nm先进制程工艺&#xff0c;集成了4个ARM Cortex-A53高…

在C++中用3种方法访问一个字符串

1&#xff0e;用字符数组存放一个字符串 编写程序&#xff1a; str是字符数组名&#xff0c;它代表字符数组的首元素的地址&#xff0c;输出时从str指向的字符开始&#xff0c;逐个输出字符&#xff0c;直至遇到\0为止。 2&#xff0e;用字符串变量存放字符串 编写程序&…

数据库 | 关系数据库设计

第七章 1.简述数据库的设计阶段&#xff1f;&#xff08;简要回答数据库设计步骤&#xff1f;&#xff09;&#xff08;&#xff08;数据库设计有哪几个阶段&#xff1f;&#xff09; 需求分析、概念结构设计、逻辑结构设计、物理结构设计、数据库的实施、数据库的运行和维护…

深度解析:ChatGPT全面测评——功能、性能与用户体验全景剖析

从去年底至今&#xff0c;由 OpenAI 发布的大规模语言模型 ChatGPT 引发了几乎所有科技领域从业者的高度关注。据瑞银集团的报告显示&#xff0c;自 2023 年 1 月起&#xff0c;仅两个月内&#xff0c;ChatGPT 的月活用户数便超过了 1 亿。 ChatGPT 被誉为“最强 AI”&#xff…

【Vue】练习-mutations的减法功能

文章目录 一、需求二、完整代码 一、需求 步骤 二、完整代码 Son1.vue <template><div class"box"><h2>Son1 子组件</h2>从vuex中获取的值: <label>{{ $store.state.count }}</label><br><button click"handleA…

使用python绘制季节图

使用python绘制季节图 季节图效果代码 季节图 季节图&#xff08;Seasonal Plot&#xff09;是一种数据可视化图表&#xff0c;用于展示时间序列数据的季节性变化。它通过将每个时间段&#xff08;如每个月、每个季度&#xff09;的数据绘制在同一张图表上&#xff0c;使得不同…

Live800:客户服务团队的力量,塑造企业的服务之魂

在数字化时代&#xff0c;企业的竞争已经不仅仅是产品和价格的竞争&#xff0c;更是服务质量的竞争。这里将探讨客户服务团队的力量如何塑造企业的服务之魂&#xff0c;以及这一团队如何成为企业不可或缺的一部分。 一、客户服务团队的重要性 客户服务团队是企业与客户之间的重…