我就廢話不多說了，大家還是直接看代碼吧~

<el-form-item label='貨道商品' prop='productid'> <el-select v-model='form.productid' filterable placeholder='請(qǐng)選擇' @change='changeselect'> <el-option v-for='item in myproducts' :key='item.Id' :label='`${item.Name}/${item.Brand}/${item.Type}/${item.Spec}`' :value='item.Id'> </el-option> </el-select></el-form-item>

正常使用方法：

:label=“item.label”

多個(gè)字段拼接：

:label='${item.Name}/${item.Brand}/${item.Type}/${item.Spec}'

補(bǔ)充知識(shí)：element el-select 動(dòng)態(tài)創(chuàng)建綁定屬性，視圖不更新之-連環(huán)填坑

項(xiàng)目需求是這樣的：

1. 在 a組件通過操作頁面，請(qǐng)求拿到需要的data，然后將數(shù)據(jù)存在vuex 中，數(shù)據(jù)結(jié)構(gòu)為多層嵌套結(jié)構(gòu)大概如下

ceshi:[ { values:[ { value:[ {id:1,label:’哈哈1’}, {id:2,label:’哈哈2’}, {id:3,label:’哈哈3’} ] }, { value:[ {id:4,label:’哈哈4’}, {id:5,label:’哈哈5’}, {id:6,label:’哈哈6’} ] } ] } ]

在組件中通過獲取vuex中的數(shù)據(jù)ceshi為數(shù)據(jù)源，

computed: { ...mapGetters([’ceshi’]) },

然后在b組件中動(dòng)態(tài)渲染數(shù)據(jù),因?yàn)槲倚枰獎(jiǎng)討B(tài)綁定屬性所以我在computed中創(chuàng)建動(dòng)態(tài)變量結(jié)構(gòu)

//數(shù)據(jù)渲染 <div v-for='(x1,index1) in ceshi' :key='index1+’1’'> <div v-for='(x2,index2) in x1.values' :key='index2+’2’'> <el-select placeholder='請(qǐng)選擇' v-model='form[index1].values[index2].value'> //動(dòng)態(tài)綁定屬性 <el-option v-for='item in x2.value' :key='item.id' :label='item.label' :value='item.id'> </el-option> </el-select> </div> </div>// computed: { ...mapGetters([’ceshi’]), form(){ return this.ceshi.map((val,index) => { let values = val.values.map((val,index) => { let json={value:''} return json }) let ojson = {values}; return ojson }) } }

發(fā)現(xiàn)數(shù)據(jù)綁定成功，選擇框變化數(shù)據(jù)也會(huì)變化，但是頁面不改變，視圖沒有更新，通過在select代碼中加入$set方法,也并沒有用，視圖同樣沒有更新；查看文檔發(fā)現(xiàn)發(fā)現(xiàn)computer默認(rèn)沒有雙向綁定 ，默認(rèn)為getter 需要自己寫setter函數(shù)，但是我發(fā)現(xiàn),因?yàn)槲业膭?dòng)態(tài)數(shù)據(jù)是我通過vuex 中的數(shù)據(jù)得來的，我也并沒有定義其他的data，所以無法使用setter，于是進(jìn)行修改如下

data() { return { form:[] },created () { this.ceshi.forEach((val,index) => { let values = val.values.map((val,index) => { let json={value:''} return json }) let ojson = {values}; this.form.push(ojson) }) }

結(jié)果報(bào)錯(cuò)，分析原因應(yīng)該是，我并沒有在a組件操作獲取數(shù)據(jù)，但這個(gè)時(shí)候created函數(shù)運(yùn)行于是報(bào)錯(cuò)了，修改邏輯為通過watch 監(jiān)聽ceshi 數(shù)據(jù)變化

ceshi: { handler(newValue,oldValue) { this.ceshi.forEach((val,index) => { let values = val.values.map((val,index) => { let json={value:''} return json }) let ojson = {values}; this.form.push(ojson) }) }, deep: true }

再看效果，發(fā)現(xiàn)解決了，記錄如下，希望能幫助到您！

以上這篇在Vue中使用Select選擇器拼接label的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。