快捷導(dǎo)航

在Vue中使用Select選擇器拼接label的操作

更新時(shí)間：2020年10月22日 14:32:41 作者：我只會(huì)寫B(tài)ug啊

這篇文章主要介紹了在Vue中使用Select選擇器拼接label的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

 <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組件通過(guò)操作頁(yè)面，請(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'}
     ]
    }
   ]
  }
 ]

在組件中通過(guò)獲取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ì)變化，但是頁(yè)面不改變，視圖沒(méi)有更新，通過(guò)在select代碼中加入$set方法,也并沒(méi)有用，視圖同樣沒(méi)有更新；查看文檔發(fā)現(xiàn)發(fā)現(xiàn)computer默認(rèn)沒(méi)有雙向綁定，默認(rèn)為getter 需要自己寫setter函數(shù)，但是我發(fā)現(xiàn),因?yàn)槲业膭?dòng)態(tài)數(shù)據(jù)是我通過(guò)vuex 中的數(shù)據(jù)得來(lái)的，我也并沒(méi)有定義其他的data，所以無(wú)法使用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)該是，我并沒(méi)有在a組件操作獲取數(shù)據(jù)，但這個(gè)時(shí)候created函數(shù)運(yùn)行于是報(bào)錯(cuò)了，修改邏輯為通過(guò)watch 監(jiān)聽(tīng)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的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: