elementui 下拉框回显_element-ui 中el-select表单不回显和校验不通过的问题

项目中有一个需求，填写表单，有两个相关联的下拉框，要根据部门筛选部门内的人员

当部门切换时，清空负责人里的内容

一开始的写法

v-for="(item,i) in getDepartments"

:key="i"

:label="item.name"

:value="item.id"

v-for="(item,i) in headuserList"

:key="i"

:label="item.name"

:value="item.id"

然后在methods里的change方法：

departChange(val) {

// 改变时获取id通过id查询当前部门的人员

API.getHead(val)

.then(res => {

this.headuserList = res.data;

this.ruleForm.followUser = "" // 置空当前选择的负责人

})

.catch(err => {

console.error(err);

});

后来发现这种写法有bug，切换部门时选择负责人不能回显，然后在其他input输入某个字就立即渲染上去

百度之后好像是因为异步渲染的原因

在各个博客上的写法就是在第二级的select中的change事件里写入这个

this.$forceUpdate()

事实证明这个方法是可行的。

当改变部门后，负责人也清空，选择负责人也可以回显。我接着做表单校验，因为这两个选项必填

然后……..就悲剧了

发现负责人那一栏已经回显了，但就是过不了非空验证

我感觉还是异步渲染的问题。。。。

数据还没渲染上去就进入表单判断了(我猜的，如果说错了请大佬们在评论区指正[笑脸])

后来试了半天，终于找到解决方法了。

rules那边的表单验证正常写，不用改

需要改的是一级select的change事件。

上代码：

departChange(val) {

API.getHead(val)

.then(res => {

this.headuserList = res.data;

// 注意！关键就在这个$set的使用，需要用$set把二级select的选项置空

this.$set(this.ruleForm, "followUser", "");

})

.catch(err => {

console.error(err);

});

然后就没问题了，大家可以试一下

如果有大佬的话最好解释一下为什么会出现这种情况，是异步的原因还数据没有被监听到呢？

elementui 下拉框回显_element-ui 中el-select表单不回显和校验不通过的问题相关推荐

elementui下拉框选择图片_Element UI系列：Select下拉框实现默认选择
[编程题目]一个整数数组,长度为 n,将其分为 m 份,使各份的和相等,求 m 的最大值★★ (自己没有做出来!!) 45.雅虎(运算.矩阵): 2.一个整数数组,长度为 n,将其分为 m 份,使各份 ...
elementui下拉框选择图片_element ui下拉框如何实现默认选择?
为什么我这样写没反应呢运营商级别 <el-option v-for="item in options1" :label="item.label" :va ...
ElementUI下拉框选择后不显示值
文章目录方法一方法二问题:vue(ElementUI)下拉框选择后赋值了,但是框上不显示  <el-form-item label="用户角色&q ...
关于elementUI下拉框value和label问题
关于elementUI下拉框回显value而不是label问题今天使用elementUI中的下拉模板时发现了一个很大的坑,根据文档所介绍的是: key唯一标识 label选择之后显示到选 ...
elementui下拉框清空_巧妙解决element-ui下拉框选项过多的问题
1. 场景描述不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好用人会说element-ui的select有一 ...
巧妙解决element-ui下拉框选项过多的问题
1. 场景描述不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好用人会说element-ui的select有一 ...
elementui下拉框默认选中第一个的方法
1.用elementui画下拉框. <el-form-item label="活动区域"><el-select v-model="form.region ...
element-ui下拉框使用value绑定id
因为在这里是先显示label在显示value所以可以把名字写在label里,把id写在value里,然后v-model绑定的值即为value里的id值,且在@change里面可以使用value即id. ...
elementUI 下拉框实现隐藏时触发相关事件
el-select 下拉框隐藏时触发相关事件 =>@visible-change 设置额外的class,=> popper-class @visible-change="chan ...

elementui 下拉框回显_element-ui 中el-select表单不回显和校验不通过的问题

elementui 下拉框回显_element-ui 中el-select表单不回显和校验不通过的问题相关推荐

最新文章

热门文章