在Vue中使用Select选择器拼接label的操作

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

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'}
     ]
    }
   ]
  }
 ]

puted: {
  ...mapGetters(['ceshi'])
 },

//数据渲染
  <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>
//  

puted: {
  ...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
    })
   }  
 }

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

 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
  }