elementUI?select控件怎么綁定多個值

這篇文章主要介紹“elementUI select控件怎么綁定多個值”，在日常操作中，相信很多人在elementUI select控件怎么綁定多個值問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”elementUI select控件怎么綁定多個值”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

elementUI select控件綁定多個值

通常使用的時候v-model都是綁定一個值，這樣沒有問題，但在某些需求中會獲取選擇項的多個值。

那么v-model就需要綁定一個對象，e餓了么的官網(wǎng)說明了綁定對象的時候必須綁定value-key值，否則會出現(xiàn)選擇項無法改變的情況。

value-key可以使用選擇項中的值。

當(dāng)時沒有看文檔的時候，自己也想了一個辦法，就是綁定選擇項的索引值，然后到對應(yīng)的nameList數(shù)組中取出對應(yīng)的項也可以。

el-select綁定多個值id、value

el-select通常v-model綁定一個form的表單屬性，但是在給后臺傳值的時候，往往在選擇了以后，不僅要傳name也要傳id，所以需要考慮其他辦法。

原v-model綁定方法：選中的值綁定form.serviceTypeName，但無法獲取id

<el-form-item label="項目分類" prop="serviceTypeName">
    <el-select v-model="form.serviceTypeName" placeholder="請選擇">
        <el-option
            v-for="item in classifiyOptions"
            :key="item.serviceTypeId"
            :label="item.serviceTypeName"
            :value="item.serviceTypeName"
         />
     </el-select>
</el-form-item>

改進方法：通過綁定index，@input綁定事件作用于多個值

改進后：

<el-form-item label="項目分類" prop="serviceTypeName">
    <el-select 
        v-model="form.serviceTypeName"
        @input="selectChangeParent"
        placeholder="請選擇"
     >
         <el-option
             v-for="(item, index) in classifiyOptions"
            :key="index"
            :label="item.serviceTypeName"
            :value="index"
         />
    </el-select>
</el-form-item>

selectChangeParent方法:

// 新增綁定id函數(shù)
    selectChangeParent(index) {
      this.form.serviceType = this.classifiyOptions[index].serviceTypeId;
      this.form.serviceTypeName = this.classifiyOptions[index].serviceTypeName;
    },

這樣就實現(xiàn)了select組件綁定多個值：id和name

到此，關(guān)于“elementUI select控件怎么綁定多個值”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>