關於elementUI select控件綁定多個值(對象)

Posted on by

elementUI select控件綁定多個值

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

那麼v-model就需要綁定一個對象，e餓瞭麼的官網說明瞭綁定對象的時候必須綁定value-key值，否則會出現選擇項無法改變的情況。

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

當時沒有看文檔的時候，自己也想瞭一個辦法，就是綁定選擇項的索引值，然後到對應的nameList數組中取出對應的項也可以。

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函數
    selectChangeParent(index) {
      this.form.serviceType = this.classifiyOptions[index].serviceTypeId;
      this.form.serviceTypeName = this.classifiyOptions[index].serviceTypeName;
    },

這樣就實現瞭select組件綁定多個值：id和name

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：