vue + element + select 清空问题 5C
 <el-form-item label="所在省市" prop="provinceId">
          <el-select v-model="teamUpdateForm.provinceId" placeholder="请选择省市" @change="initCitys" style="width:100%" >
            <el-option
              v-for="item in provinceOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="所在地区" prop="cityId">
          <el-select v-model="teamUpdateForm.cityId" placeholder="请选择地区" style="width:100%">
            <el-option
              v-for="item in cityOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>

代码如上,现在的问题是这样:省市都能正常出来,联动也实现,就是在选择省的时候市的下拉框应该清空上一次的选择,我用this.cityId = '',this.teamUpdateForm.cityId = '',this.cityId = null这些都试过,都无法清空,请问是什么问题呢?

1

3个回答

0

data(){
return {
form:{
teamUpdateForm.provinceId:'',
teamUpdateForm.cityId:'';
}

}

},
watch: {
'form.select1': function (newValue, oldValue) {
this.teamUpdateForm.cityId = ''
}
},
methods:{
...
}
在watch监听根据省份是否有新的值去把原先的值为空

0

给加个ref,假如值为'test'

this.$refs['test'].resetFields();

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
select基本的取值,赋值及清空
1.获取select被选中的option的值 js实现 var selected = document.getElementById('selectedId'); //定位id var index = selected.selectedIndex; // 选中索引 var text = selected.options[index].text; // 选中文本 var value = s
vue+elementUI+select 选中多个值,我要删除其中的一两个 方法如下
&lt;el-select value-key="moduleCode" multiple filterable allow-create default-first-option @remove-tag='removeTag' v-model="ruleForm.module3" placeholder="...
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理在公司项目中,我们使用了 element-ui 组件库,非常的好用。近日我们的项目升级,而 element-ui 组件库也升级了。而升级的内容中有我们希望使用的新特性,于是我们愉快的升级了。但是在升级之后,我们发现在某一块功能中使用的 Select 组件出现了问题。具体表现为选不上值,随便
vue+element-ui select多选框赋值之后触发change事件和remove-tag事件
由于业务需求,需要在页面上使用element-ui的select多选框的方法,当select为空时,change事件和remove-tag事件可以完美呈现,但是当select中赋值后,change事件和remove-tag事件可以触发,但是页面上没有反应。 &amp;lt;el-select v-model=&quot;debt.borrowers&quot; filterable multiple placeholde...
vue element-ui form表单重置 快捷方法
点重置快速清空的方法 &amp;lt;el-form status-icon :rules=&quot;rules&quot; :model=&quot;ruleForm&quot; ref=&quot;ruleForm&quot; :label-position=&quot;labelPosition&quot; label-width=&quot;100px&quot;&amp;gt; &amp;lt;titleInfo&amp;gt;
解决elementUI的穿梭框clearQuery方法无效
解决elementUI的穿梭框clearQuery方法无效 原因很简单,2.2.0版本才有此清空功能; 如果在生产中的项目中不好升级到2.2.0+版本有以下解决方法。 解决方法(对于2.2.0一下版本的): 离开transfer时: // 清空左边搜索 this.$refs.yourTransfer.$children[&amp;amp;quot;0&amp;amp;quot;].$children[&amp;amp;quot;0&amp;amp;quot;]._data.currentValue ...
element-ui的select组件设置预选项没问题,但重新选中不改变的问题解决
简单描述下bug:项目需要弹窗设置参数,打开前先预设了服务器端数据,弹窗打开可以正常显示,但是select选中改变不了视图。如图:解决思路:1.首先看有没有修改掉选中对绑定的值:查证后发现值已经被修改了,但视图不变2.版本问题排除:解决不了最后怀疑:vue的对对象或者数组进行修改视图不更新:通过select的change事件重新给数组对象赋值克隆的新数组对象解决了问题代码如下...
项目中遇到的问题---vue+element对话框关闭后重新打开数据不清空
解决方法: 1、 &amp;lt;el-dialog title=&quot;提示&quot; :visible.sync=&quot;channelBox&quot; size=&quot;tiny&quot; :before-close=&quot;closeImport &quot;&amp;gt; &amp;lt;span&amp;gt;这是一段信息&amp;lt;/span&amp;gt; &amp;lt;span slot=&quot;footer&quot; cl
vue中对话框关闭以后清空对话框中input,select内容
首先需要确定要关闭的对话框,在对话框中写入关闭和要调用的函数 例如:@close=&quot;handleClose&quot; 在methods:{   handleClose()  {     for (let key in this.form) {         this.form[key] = ' ';      }   } } 注:this.form 指的是对话框中el-form 绑定的...
vue 更改计算属性后select选中值不更改的解决方法
先上代码://... <body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}<
[前端笔记] Vue中Element中Select下拉框选取值问题
之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html &lt;el-select v-model="ite" placeholder="请选择" value-key="mateGroup"&gt; &lt;el-option style="wid...
vue element 模糊查询 输入提示框
vue element 输入提示框 如果你想做一个模糊查询的下拉 搜索框 那你来对了 简单的我就不说了 点链接 看文档 http://element.eleme.io/#/zh-CN/component/input 下面是我的例子 requestregion() 是我请求后台数据的接口 因为后台数据 返回过来的数据不是value 类型 我用循环拿到我想要的格式 其中this.bb=(item.i...
vue element UI el-select选择框触发事件(每选择一次则触发一次该事件)
&amp;lt;el-select v-model=&quot;selectData.id&quot; @change=&quot;selectTrigger(selectData.id)&quot;&amp;gt; &amp;lt;el-option label=&quot;请选择&quot; value=&quot;&quot;&amp;gt;&amp;lt;/el-option&amp;gt; &amp;lt;el-option v-for=&quot;ite
vue填坑系列之重置select选择器默认值
具体的需求如下,在点击重置按钮的时候,我需要将select下拉框重置为初始值,输入框重置为空 打印输出值的时候会发现如果默认没有任何选中的状态下,直接将当前元素重置为空字符串就可以了 如下: this.form.deviceNoVal = '' this.form.deviceType = '' 如果重新赋值的话相当于...
vue + ElementUI 关闭对话框清空验证,清除form表单
前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1、首先在你的对话框 取消按钮 加一个click事件,例如:(ps::callOf里面的addGroupData和ref一 一对应起来) div slot="footer" class="dialog-footer">   el-b
vue element-ui表单重置失败(解决)
  1.表单要写上ref=&quot;form&quot;来自哪个 表单的数据 2.需要重置的选项必须加上prop=&quot;name&quot;的指向 3.重置条件按钮的方法的参数必须加上表单名  
VUE项目使用Element-ui 下拉组件的验证失效问题
Element-ui 下拉组件的验证失效问题 问题描述: 在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的, 就会出现下拉框验证时失效问题. 问题现象: 如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求 解决办法: 确认触发方式为change事件 增加相对应的type属性 代码 r...
element table 保持勾选解决方案
问题描述:table 会在你  :data刷新数据的时候   清空你之前 人为或事件操作的  勾选状态 这种在你做类似  websocket 推送刷新数据时会非常头疼,看了很多晚上的解决方案 基本就2种 要么是  缓存  check 属性 到 数据里,要么  是 直接   this.$refs.tableObj.toggleRowSelection 其实 element 他有一个属性的 re...
vue2.0 element-ui中的el-select选择器无法显示选中的内容
我使用的是element-ui V2.2.3。代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值。 select.vue文件 &amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;div class=&quot;row&quot; v-for=&quot;RowItem in rows&quot;&amp;gt; ...
vue+element下拉框实现 三级联动
要求实现三个带搜索的 下拉框 的三级联动, element 里的下拉框带搜索,可以实现,就是三级联动需要自己实现 给到 三个接口,1,获取小区list                            2, 获取该小区楼栋号                           3,获取楼栋下的房间号 实现如下: 因为涉及到回填,所以 页面一加载就要获取 url 的小区id, ...
Vue elementUi表格批量删除
效果如图:根据官网多选表格所给的@selection-change="handleSelectionChange",此方法可以获取包含当前选中所有数据的数组,但是并没有下标index.第一种方法:通过两数组中对象的属性值是否相同进行删除,但是存在多个相同对象的数据时,会一起删除,不采用。第二种方法:直接通过数组中的数据对象,==号比较,这里注意了"虽然多个对象相同,但并不是同一个引用,可以实现一一...
解决element ui select下拉框不回显数据问题
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一
select重置清空以选取条件
$(&quot;#selkk&quot;).each(function (i, j) { $(j).find(&quot;option:selected&quot;).attr(&quot;selected&quot;, false); $(j).find(&quot;option&quot;).first().attr(&quot;selected&quot;, true); });
用Vue、element-ui、axios实现省市区三级联动
现在大部分电商的网站、app都需要用户或者管理者去选择设置地区等位置信息。下面我就介绍一下前端开发者用vue,axios,element-ui开发一个省市区三级联动的组件。 1.准备工作,首先我们需要全中国的省市区资源的json数据(科普一下:前六位数字是身份证前六位) 2.搭建vue-cli,安装axios,element-ui,创建vue,webpack项目     1).     在...
Vue Element 分组+多选+可搜索Select选择器实现
最终效果(http://47.98.205.88:3000/mult_group_selection)见下图。实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考 image.png 准备工作: 除了vue脚手架、element等必要包之外。该项目...
关于element-ui中select和radio组件在弹框里面使用点击的时候出现闪一闪的问题。
问题:最近使用vue + element-ui的时候发现select和radio在弹框上面使用的时候点击时会出现闪一闪抖动的问题。 解决方案:.el-dialog{ -webkit-backface-visibility: hidden; },添加这个css可以解决闪动的问题,因为某些组件中存在transform属性,去掉对应标签transform属性也可,查看某些标签中是否有transfo...
组件Element中的Select选择器——远程搜索
&amp;lt;template&amp;gt; &amp;lt;div class=&quot;form-group&quot;&amp;gt; &amp;lt;el-form-item label=&quot;所属机构&quot; prop=&quot;org&quot;&amp;gt; &amp;lt;el-select v-model=&quot;queryForm.org&quot; clearable=&quo
封装vue element-ui下拉框组件
原文:https://www.jianshu.com/p/aaf0acba97a0     公用组件sltopn.vue   &amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;el-select v-model=&quot;svalue&quot; placeholder=&quot;请选择&quot; filterable&amp;gt; &amp;lt;el-option v-for...
在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
在template中添加标签   &amp;lt;el-autocomplete v-model=&quot;detail.CUSTOMER_NAME&quot; :fetch-suggestions=&quot;querySearchAsync&quot; @select=&quot;handleSelect&quot; placeholder=&quot;请输入内容&quot; &amp;gt; &amp;lt;/el-autocomplete&amp;gt;   在
vue中element表单清除不了的bug
正常问题:        在el-form标签外的的元素使用resetField()方法未能清除表单数据,可使用下面的方法: this.$nextTick(() =&amp;gt; { this.$refs.menuForm.resetFields(); }); 介绍bug背景        在一个页面新增、编辑使用同一个dialog框,点击编辑按钮编辑的...
关于select的清空,获取选中值
1.清空   $("#province").empty();    2.获取选中默认值   var provinceName = $("#province").find("option:selected").val();  3.获取选中文本值   var provinceName = $("#province").find("option:selected").text
vue element 的渲染问题
问题:在一个表单页面中,每次切换页面的时候,会自动触发change函数以下是源代码&amp;lt;template scope=&quot;scope&quot;&amp;gt; &amp;lt;el-select v-model=&quot;scope.row.SaveModel&quot; placeholder=&quot;请选择&quot; @change=&quot;handleSwitch(scope.row)&quot;&amp;gt; &amp;lt;el-option v-for=
删除和添加select下拉框选中的内容option,以及清空option选项
删除:$(&quot;#sysusergroupList&quot;).find(&quot;option:selected&quot;).remove();添加: document.getElementById(&quot;sysusergroupList&quot;).options.add(new Option(userList[i].name,userList[i].id));$(&quot;#sysusergroupList&quot;).append(&quot;&amp;lt;o...
Vue中Table组件Select的勾选和取消勾选事件
简述 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件。 勾选 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;首先我们需要说一下这个需求,如下图: &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;勾选要实现如下的一个效果:对左...
element ui select多选组件 重构
element ui select多选组件 标签根据数据属性显示颜色不同, 至于plugins
Vue中使用Select选择器拼接label的方法
&amp;lt;el-form-item label=&quot;货道商品&quot; prop=&quot;productid&quot;&amp;gt; &amp;lt;el-select v-model=&quot;form.productid&quot; filterable placeholder=&quot;请选择&quot; @change=&quot;changeselect&quot;&amp;gt;
vue + elementui在火狐浏览器中会有一些错位的问题
问题:样式错位,比如会向下偏移等解决方案:    查看错位标签是否设置有flex-wrap:wrap;        如果有把值改为nowrap试一试
vue2使用element-ui的el-select组件传递参数和对象
el-select组件官方实例中只能通过value绑定传递一个参数 在线实例展示:https://jsfiddle.net/1erjhcL3/655/   在有些使用场景中需要同时用到对象中的两个参数(id和name) 首先想到的是同时绑定这两个参数,一起传递,官方文档没有可以直接使用的属性或方法 换个角度思考,将包含两个参数的对象作为value的绑定 官方文档提供valu...
vue+elementUI下拉框联动显示
&lt;el-row&gt; &lt;el-col :span="12"&gt; &lt;el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"&gt; ...
iview中Select组件单选时清空选项操作
iview中Select组件单选时清空选项操作 学习借鉴自:https://blog.csdn.net/xustart7720/article/details/78505729
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 区块链问题 ios视频开发问题