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

 <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的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。