1. 程式人生 > 實用技巧 >element-ui Select選擇器獲取到選中的值

element-ui Select選擇器獲取到選中的值

如圖所示 頁面:

頁面的程式碼:

配置型別:
<el-select v-model="searchConfig" @change="searchSelect(searchConfig)" clearable placeholder="請選擇配置型別:">
     <el-option
            v-for="item in configTypeSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
       </el-option>
</el-select>

 說明: 其中 searchConfig為繫結的下拉框的value ,@change為select發生改變時觸發的事件,configTypeSelect下拉框的資料的陣列

configTypeSelect資料格式:

configTypeSelect: [
                {
                    value: "黃金糕"
                },
                {
                    value: "雙皮奶"
                },
                {
                    value: "蚵仔煎"
                },
                {
                    value: "龍鬚麵"
                },
                {
                    value: "北京烤鴨"
                },
]

methods中獲取值:

searchSelect(value){
      console.log(value)
      this.searchConfig = value
 },

如果有多個下拉框 需要v-model繫結不同的value ,這樣才能做到資料混淆

大功告成 !