iview清除单选下拉框选中状态

最新推荐文章于 2025-11-08 10:51:47 发布
原创 最新推荐文章于 2025-11-08 10:51:47 发布 · 1.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #iview

本文深入探讨Vue中表单组件的使用技巧，特别是状态选择器的实现与清除功能，确保用户界面的干净整洁，提升用户体验。 
 <FormItem  label="状态" prop="serviceStatus">
                                    <Select ref="serviceStatusClear"  v-model="searchParams.serviceStatus" class="mr-thirty query-cond" style="width: 120px" clearable>
                                        <Option v-for="item in serviceStatusList" :value="item.label" :key="item.label">{{ item.value }}</Option>
                                    </Select>
                                </FormItem>

重点是ref="serviceStatusClear"跟clearable必须加上

   this.$refs.searchParams.resetFields();  // form表单清除功能
      this.$refs.serviceStatusClear.clearSingleSelect(); //清除下拉框功能
      serviceStatusClear必须跟ref的内容一致

在这如果不要里插入图片描述
如上图,如果不用this.$refs.serviceStatusClear.clearSingleSelect();当你用form表单的置空功能,会保留选中的样式
在这里插入图片描述
如上图,清除后的效果

解决iview 的Select下拉框选项在FormItem中错位的问题
weixin_41668951的博客
05-27 1076
前言：在使用iview的过程中，我遇到这样一个问题，在Form组件的FormItem中使用Select下拉框组件。但是当弹出框超过一屏需要滚动时，select的下拉选项会出现错位，留在页面中（下图1为正常，图2为滚动后，下拉选项错位 留在页面中。） 图1： 图2： 在分析组件代码后，发现 ivu-select-dropdown 中的top样式会碎页面滚动不断加大（图3所示）： 图3： 解决方案 覆盖作者的原来样式，固定 ivu-select-dropdown 中 top值为33px，下拉选项就不会随页
vue点击取消再点击选中（单选）
qq_46617584的博客
09-07 533
vue点击取消再点击选中（单选）
iview 下拉框清空问题，清除遗留的focus样式
qq_40295815的博客
04-17 1486
<Select clearable :disabled="isSee" v-model="formData.baseId" placeholder="请选择行业" name="select"> <Option v-for="item in categoryList" :value="item.id" :key="item.id...
VUE ELEMENT UI 清空select 下拉选项
weixin_43577131的博客
10-09 1万+
VUE ELEMENT UI 清空select 下拉选项 1.select代码 <el-form ref="searchForm" :inline="true" :model="searchForm" label-width="80px"> <el-form-item label="设备类别" prop="equipmentType"> <el-select v-model="searchForm.equipmentType.code" clearable @change
基于iView的Vue前端框架搭建与实战
最新发布
weixin_30765637的博客
11-08 779
简介：在现代Web开发中，Vue.js凭借其轻量、高效和渐进式特性成为主流前端框架之一。本项目结合iView这一高质量Vue UI组件库，构建了一个功能完整、易于扩展的前端框架。通过集成Vue Router实现路由管理、Vuex进行状态管理，并使用Webpack进行模块化打包，项目支持组件化开发、API交互、测试及部署全流程。开发者可借助iView丰富的UI组件快速构建美观且响应式的界面，同时利用ES6+语法、CSS预处理器等现代技术提升开发效率。本框架适用于中小型项目的快速开发与落地。
js多维数组变一维数组（数组扁平化）
weixin_45087036的博客
02-27 540
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
iview 下拉框清空但下拉列表选中
weixin_43845550的博客
03-03 494
<Select v-model="vehicleTypeId" ref="vehicleType" filterable clearable > <Option v-for="item in vehicleTypeList" :value="item.id" ...
iview中Select组件单选时清空选项操作
hanjingjun123的博客
09-23 7996
iview中Select组件单选时清空选项操作 学习借鉴自：https://blog.youkuaiyun.com/xustart7720/article/details/78505729
完美解决iview 的select下拉框选项错位的问题
08-27
完美解决iview 的select下拉框选项错位的问题 在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的...
精选资源
iview实现select tree树形下拉框的示例代码
01-19
本文介绍了iview实现select tree树形下拉框的示例代码，分享给大家，具体如下： html部分 <Tree data=treeData ref=tree render=renderContent></Tree> 数据部分 export const treeData= [ { title: 'parent 1...
精选资源
iview form清除校验状态的实现
01-19
在iview 的官方api 中并没找到清除校验状态的方法，看了下源码，用一个粗糙的方法解决了。 源文件 form-item.vue 中的 resetField方法 是通过修改这两个属性的值清空状态和提示的 其实就是把 formItem 的两个属性值...
iview表格通过render放置Select下拉框，操作完成清空单选项
PhilsphyPrgram的博客
03-31 1812
select下拉框实现单选项清空
iview实现表格的全选、反选、清空、统计、单选等功能
wytraining
03-29 4882
iview实现表格的全选、反选、清空、统计、单选等功能
iview的Select选择器清空选择项操作
leilei__66的博客
01-04 4702
iview的Select选择器清空选择项操作 一、iview组件的自带的清空操作 二、自制input代替原input输入框 自制input代替原input输入框，实现删除输入随意
iview select 怎么清空_iView之清空选择框
weixin_39779528的博客
12-22 1343
Form表单布局的vue组件，已经增加了校验选择框，判断为空的情况下不调用接口。后来发现，选择了选择框后，清空，再点查询，还是会调接口，看日志发现传了原来清空的值过来，实际上没有清空。这里增加on-clear 事件绑定清空值。1 2 :filterable="true">3 4 ...
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的操作
chenlim87的博客
10-11 5101
公司的一个遗留项目用到了iView框架,今天要加个模糊查询的需求 代码如下: 类型搜索是下拉选择框,回避方是input输入框。类型选择框加了clearable属性，在清除时发现一个问题，页面上avoid_type参数虽然被清空了，但是调用接口时，avoid_type的值变成了undefined，不是空字符串，导致请求失败。 解决方法：在搜索时先判断avoid_type的值，如果为un...
（多选）解决vue中多选table中的数据，将选中的多个数组中的key值提交给后端，提交完成后清除勾选框
热门推荐
qq_34825875的博客
06-28 3万+
首先描述一下问题吧，最近在开发中遇到一个问题，就是想要提取带有多选框table中的id，然后将所选中表中的key值为id（任务号）的数据以数组的形式传给后端，&lt;el-button type="primary" size="medium" @click="speedupCheckbox"&gt;&lt;i class="el-icon-time"&gt;&amp;nbsp;全速&amp
vue之a-table中如何清空选中的数据
ljljlj1993的博客
07-17 1万+
<template> <a-table ref="table" size="default" :columns="columns" :dataSource="loadData" :showAlertInfo="true" :pagination=fa...
iview表头添加下拉框
01-02
### 实现 iView 表格表头中的下拉选择框 为了在 iView 的表格组件中为表头添加下拉选择框，可以自定义渲染函数来创建具有特定功能的表头。通过 `renderHeader` 方法可以在表头单元格内放置任何 HTML 或者其他 Vue 组件，比如 Select 下拉菜单。 下面是一个具体的例子展示如何实现这一需求： ```vue <template> <div id="app"> <Table :columns="columns" :data="data"></Table> </div> </template> <script> export default { data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '年龄', key: 'age', renderHeader(h, params) { return h('Select', { props: { value: this.columnValue, placeholder: '请选择...' }, on: { 'on-change': (value) => { console.log(value); } } }, [ h('Option', { props: { value: 'option1' } }, '选项一'), h('Option', { props: { value: 'option2' } }, '选项二') ]); }.bind(this), columnValue: '' }, { title: '地址', key: 'address' } ], data: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park' } ] }; } }; </script> ``` 在这个实例里，使用了 `renderHeader` 函数来自定义“年龄”列的头部显示方式，在其中嵌入了一个简单的下拉列表[^1]。需要注意的是，这里利用了 `h()` 函数作为虚拟 DOM 创建工具，并绑定了相应的事件处理程序以便于响应用户的交互操作。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值