關(guān)于elementUI select控件綁定多個值(對象)

更新時間：2023年04月05日 15:44:20 作者：A873054267

這篇文章主要介紹了關(guān)于elementUI select控件綁定多個值(對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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