iview关闭抽屉弹层时清空Select弹框高亮样式

最新推荐文章于 2023-02-26 14:28:17 发布
最新推荐文章于 2023-02-26 14:28:17 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： iView 文章标签： iview关闭抽屉弹层时清空Select弹框高亮样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianwenxiu/article/details/91449862
版权

        用iview做后台管理系统，首页数据列表页，点击新增按钮会弹出一个弹层，那个弹层用的是iview里的Drawer抽屉组件，里面的下拉框都是iview里的select组件，在新建完一条以后，再次打开下拉框里还会遗留上次选择过的样式，后来才知道需要用到一个方法clearSingleSelect。

解决方案：在Select元素上定义一个ref属性，取到Select框，在点击取消时的方法里调用iview内置的 clearSingleSelect 这个方法，因为点击提交成功后也要调用这个方法来清空表单，所以写一次就可以了

步骤1：

步骤2：

池中飞雪
关注
专栏目录
iview menu手动关闭子菜单和去除选择项选中状态（自制手风琴模式）
weixin_44000275的博客
08-27 1711
使用前提 iview menu菜单中是有自带手风琴模式的。 1、在菜单项没有子菜单时，点击一个会去除之前的菜单项选中状态的 2、在munu全为子菜单时添加accordion便能大道手风琴效果这里不赘述。 目标效果 如图，点击数据报表这种时，会关闭警示信息这种之前展开的子菜单项，在展开警示信息这个子菜单时会清除数据报表的选中状态并自动选中子菜单第一个项。 原理是修改绑定的展开或选中项的name值，之后通过官方方法更新菜单状态。 注：熟悉的可以直接拉到代码实现的第三项事件，相信会有所启发！ 代码实现 1、H
取消input/select等选中后的高亮样式
Shadow_Weirdo
04-12 4012
outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0);
iview---去掉select选择器默认边框
weixin_51409660的博客
08-27 1286
这是iview官方组件库的选择器，都是有一跳灰灰的边框，想要去掉，但设置border：0没有效果 我是这样做的： 1、首先添加一个你相中的select选择器，给他设置个class，这个很重要！！！ <Select v-model="model2" style="width:100px" class="company-select" > <Option v-for="item in cityList" :value="item.value" :ke...
vue element-ui关闭弹窗清空表单验证，清空表单
总结前端开发中遇到的问题，分享前端知识
09-08 3184
增加ref属性 ： <el-form ref="formData"></el-form> ElementUI自带清除表单方法 this.$refs[formName].resetFields(); // 重置表单移除校验 this.$refs[formName].clearValidate(); // 仅清除验证
iview实现select tree树形下拉框的示例代码
10-17
在前端开发中，IView UI 是一个流行的 Vue.js 组件库，它提供了许多美观且功能丰富的组件，如 Select Tree（树形下拉框），用于在下拉列表中展示层次结构的数据。Select Tree 结合了 Select 组件和 Tree 组件的功能...
vue iview的菜单组件Mune 点击不高亮的解决方案
10-16
在Vue.js应用中，特别是在使用iView UI框架开发时，我们可能会遇到菜单组件Menu在点击后不显示高亮效果的问题。这个问题通常是由于Vue Router的配置或组件自身的样式冲突导致的。下面将详细介绍如何解决这个问题。 ...
vue+iview写个弹框的示例代码
08-28
iView 是一款强大的 UI 组件库，它为 Vue.js 应用程序提供了丰富的界面元素，包括但不限于按钮、表格、输入框等，以及本文重点涉及的弹框组件。 首先，我们要了解 iView 的一些核心特性。iView 提供了高质量且功能...
完美解决iview 的select下拉框选项错位的问题
08-27
在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的样式设置引起的。 在iview中，select下拉框组件...
关iview的弹出框，点击确定，需要手动关闭的注意事项。
weixin_44777146的博客
11-19 1748
今天遇到一个需求： 弹出的modal框中，勾选数据，在点击modal框的确定时，调用接口，如果数据返回空，关闭modal框，否则modal框不关闭，提示他重新勾选数据。 modal框有props参数 loading默认是false,就是在点击确定直接关闭modal框。如果设置loading设置为true,则点击确定不会自动关闭modal框，需要手动设置modal框的显示和隐藏。这是我又发现另一个问题，请求一次提示重新勾选数据后，modal的确定按钮为loading加载状态，无法重新勾选进行第二次请求发送，数
vue中对话框关闭以后清空对话框中input，select内容
qq_38372917的博客
11-21 8859
首先需要确定要关闭的对话框，在对话框中写入关闭和要调用的函数 例如：@close="handleClose" 在methods:{   handleClose()  {     for (let key in this.form) {         this.form[key] = ' ';      }   } } 注：this.form 指的是对话框中el-form 绑定的...
关闭或取消清空表单内容
淡淡的芦苇的博客
03-12 1153
1.v-if 布尔值控制显示隐藏， 使用v-if 切换表单显示隐藏，关闭表单时v-if设置为 false，打开表单时使用v-if=“true” 父组件 直接调用子组件 <version-drawer v-if="showDrawer" v-model:visible="showDrawer" :data="editData" @onEmitSubmit="onEmitSubmit" /> 2.watch监听在组件关闭窗口里调用props里的所有为空的属性 子组件
解决 iview-modal 点击‘确定’按钮弹框自动关闭问题
Codernmx
09-24 1557
在使用iview发现点击确定的时候，他的弹层会自动关闭（默认的确定和取消 footer） 解决办法 使用slot="footer"添加一个footer，自定义确定取消的方法控制弹层的显示与隐藏。 <div slot="footer"> <Button size="large" @click="showDialog = false" >取消</Button> <Button
iview 的select下拉框选项错位的问题
CMchenmeng的博客
12-13 1230
实际前端开发中遇到下面当页面过大需要拖动时下拉框的选项出现内容于下拉框分离 在百度搜索后发现，有作者在分析组件代码后，发现以下一个样式： .ivu-modal .ivu-select-dropdown {     position: absolute !important; } 解决方案 正是这个样式影响了下拉框的定位，解决的方式是覆盖作者的原来样式。 但是，很不巧的是，作者加了一个 ...
iview Model 高度默认内容撑开，只有超过指定高度才显示滚动条
weixin_43972213的博客
06-18 3528
<Modal v-model="errorDialog" width="70%" title="信息详情"> <div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">{{errorMessage}}</div> </Modal> errorMessage: '', errorDialog: false, showMore (content) { this.errorDial
iView的Select选择框清空
热门推荐
lihefei_coder的博客
03-05 1万+
&lt;template&gt; &lt;Select v-model="model8" ref="resetSelect" clearable&gt; &lt;Option v-for="item in cityList" :value="item.value" :key="item.value"&gt;{{ item.label }}
iview的Select选择器清空选择项操作
leilei__66的博客
01-04 4340
iview的Select选择器清空选择项操作 一、iview组件的自带的清空操作 二、自制input代替原input输入框 自制input代替原input输入框，实现删除输入随意
iview select清空选择,iview中select组件使用总结
weixin_32891615的博客
03-19 1182
1.使用iview的select组件进行远程搜索远程搜索需同时设置filterable、remote、remote-method、loading四个 props，其中 loading 用于控制是否正在搜索中，remote-method 是远程搜索的方法。注意：需要给 Option 设置 key。设置初始显示值，需设置label属性。页面代码：{{item.userName}}参数值：exp...
关于iView手动清除Select选择器内容的问题
风清扬道场
02-26 598
关于iView手动清除Select选择器内容的问题
iview select 多选怎么清空
最新发布
05-25
要清空 iView Select 组件的多选，可以通过以下两种方式实现： 1. 代码方式： 可以通过给 Select 组件的 v-model 绑定一个空数组来清空多选： ```html <Select v-model="selectedOptions" mode="multiple"> <!...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值