還是二級聯(lián)動問題，之前的方法是可以實(shí)現(xiàn)二級聯(lián)動的。但是理想很豐滿，現(xiàn)在很骨感。因?yàn)楹笈_可能也沒法給你理想的數(shù)據(jù)結(jié)構(gòu)。最后想到辦法的利用兩個接口拿到數(shù)據(jù)，實(shí)現(xiàn)渲染。直接來代碼

{{ 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,//校驗(yàn)

};

},

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)

},//根據(jù)是否有文章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默認(rèn)只返回一個值，但我同時需要firstId與firstname兩個參數(shù)。解決方法：label-in-value(是否將 label 和 value 一并返回，默認(rèn)只返回 value)，這個api主要幫我實(shí)現(xiàn)將firstId傳給獲取二級欄目當(dāng)參數(shù)，firstname傳給保存接口。

2.渲染問題：1)沒注意:key這個參數(shù)。寫的是:key="item.firstId"結(jié)果死活都渲染不出我想要的數(shù)據(jù)。因?yàn)樵跊]使用:label這個api是沒有任何問題的，最后仔細(xì)想想原來對象渲染的問題key與value當(dāng)然要對應(yīng)不然怎么實(shí)現(xiàn)渲染，想打自己。

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

3)當(dāng)文章是處于編輯狀態(tài)，當(dāng)然要把文章渲染進(jìn)來?？墒怯捎谏芷诘脑蛞婚_始拿不到父級傳的數(shù)據(jù)，有考慮過數(shù)組更新沒渲染的問題，使用$set去解決。但并沒效果，就想到了如果沒有獲取到數(shù)據(jù)就再次渲染直到拿到數(shù)據(jù)。終于搞定。不知道哪位大? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 佬有更好的解決方案。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。