項目中有一個需求，填寫表單，有兩個相關聯的下拉框，要根據部門篩選部門內的人員

當部門切換時，清空負責人里的內容

一開始的寫法

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表单不回显和校验不通过的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。