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

<el-form-item label='貨道商品' prop='productid'> <el-select v-model='form.productid' filterable placeholder='請選擇' @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”

多個字段拼接：

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

補充知識：element el-select 動態創建綁定屬性，視圖不更新之-連環填坑

項目需求是這樣的：

1. 在 a組件通過操作頁面，請求拿到需要的data，然后將數據存在vuex 中，數據結構為多層嵌套結構大概如下

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中的數據ceshi為數據源，

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

然后在b組件中動態渲染數據,因為我需要動態綁定屬性所以我在computed中創建動態變量結構

//數據渲染 <div v-for='(x1,index1) in ceshi' :key='index1+’1’'> <div v-for='(x2,index2) in x1.values' :key='index2+’2’'> <el-select placeholder='請選擇' v-model='form[index1].values[index2].value'> //動態綁定屬性 <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 }) } }

發現數據綁定成功，選擇框變化數據也會變化，但是頁面不改變，視圖沒有更新，通過在select代碼中加入$set方法,也并沒有用，視圖同樣沒有更新；查看文檔發現發現computer默認沒有雙向綁定 ，默認為getter 需要自己寫setter函數，但是我發現,因為我的動態數據是我通過vuex 中的數據得來的，我也并沒有定義其他的data，所以無法使用setter，于是進行修改如下

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) }) }

結果報錯，分析原因應該是，我并沒有在a組件操作獲取數據，但這個時候created函數運行于是報錯了，修改邏輯為通過watch 監聽ceshi 數據變化

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 }

再看效果，發現解決了，記錄如下，希望能幫助到您！

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