還是二級聯動問題，之前的方法是可以實現二級聯動的。但是理想很豐滿，現在很骨感。因為后臺可能也沒法給你理想的數據結構。最后想到辦法的利用兩個接口拿到數據，實現渲染。直接來代碼

{{ item.firstname }}

{{ item.name }}

import {

geSecondCategory

} from'@/api/article';

exportdefault{

name:'long',

props: {

categoryList: {//父級傳來的一級欄目列表

type: Array,

},

allDataList: { // 文章列表

type: Array,

}

},

data() {return{

secondnameList: [],//二級欄目列表

formValidate: {

secondname:'',

categoryIdName:'',

categoryId:'',

},

ruleValidate: ruleValidate,//校驗

};

},

methods: {//獲取二級欄目

changeSecList(val) {this.formValidate.categoryIdName =val.valuethis.geSecondCategory(val.value)

},

async geSecondCategory(id) {

let res=await geSecondCategory(id)this.secondnameList =res.data.content

},//存入二級categoryId

getCategoryId (val) {this.formValidate.categoryId =val.value

console.log(val.value)

},//根據是否有文章ID渲染頁面

async init() {this.articleId = this.$route.query.articleId || '';if (this.articleId) {

let { data }= await getArticles(this.articleId);this.formValidate =data;if (this.allDataList.length) {this.allDataList.forEach((item, index) =>{if (data.categoryId ===item.id) {this.formValidate.name =data.categoryIdthis.formValidate.categoryIdName =item.firstIdthis.geSecondCategory(item.firstId)

}

})

}else{this.init()

}

}

},

},

mounted() {this.init();

},

};

遇到的問題與解決方法

1.select默認只返回一個值，但我同時需要firstId與firstname兩個參數。解決方法：label-in-value(是否將 label 和 value 一并返回，默認只返回 value)，這個api主要幫我實現將firstId傳給獲取二級欄目當參數，firstname傳給保存接口。

2.渲染問題：1)沒注意:key這個參數。寫的是:key="item.firstId"結果死活都渲染不出我想要的數據。因為在沒使用:label這個api是沒有任何問題的，最后仔細想想原來對象渲染的問題key與value當然要對應不然怎么實現渲染，想打自己。

2)on-change事件中選中的Option變化時觸發，默認返回 value，如需返回 label，詳見 label-in-value 屬性。這是官網給寫的解釋，所以:label應該顯示firstname，那:value與:key就得用id與進行匹配。

3)當文章是處于編輯狀態，當然要把文章渲染進來。可是由于生命周期的原因一開始拿不到父級傳的數據，有考慮過數組更新沒渲染的問題，使用$set去解決。但并沒效果，就想到了如果沒有獲取到數據就再次渲染直到拿到數據。終于搞定。不知道哪位大? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 佬有更好的解決方案。

當解決完這些問題，都覺得好簡單，但是當時可不是這種想法。到這里，所有的事情都解決，等待上線。

總結

以上是生活随笔為你收集整理的iview的select联动_iview2 之select二级联动细谈的全部內容，希望文章能夠幫你解決所遇到的問題。

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