elementUI 學習入門之 Select 選擇器

Select 選擇器

基礎用法

 1 <el-select v-model="val1" placeholder="請輸入">
 2     <el-option v-for="item in options" :label="item.value" :value="item.key" :disabled="item.disabled">
 3     </el-option>
 4 </el-select>
 5 
 6 options: [
 7     {key: "選項一", value: "蘋果"},
 8     {key: "選項二", value: "華爲"},
 9     {key: "選項三", value: "Vivo"},
10     {key: "選項四", value: "OPPO", disabled:true},
11     
12     ],
13     val1: ''

基礎選擇器

若是 disabled 放在 <el-option> 中，則此選項不可用；若 disabled 放在 <el-select> 中，則整個選擇器不可用

可清空單選

爲 <el-select> 設置 clearable 屬性，可將選擇器清空（僅限於單選）

多選

爲 <el-select> 設置 multiple 屬性，v-model 的值爲此時選中值組成的數組

 1 <el-select v-model="val3" placeholder="請輸入" multiple>
 2     <el-option v-for="item in options" :label="item.value" :value="item.key">
 3     </el-option>
 4 </el-select>
 5 
 6 options: [
 7     {key: "選項一", value: "蘋果"},
 8     {key: "選項二", value: "華爲"},
 9     {key: "選項三", value: "Vivo"},
10     {key: "選項四", value: "OPPO", disabled:true},
11     
12     ],
13     val3: [],

基礎多選

自定義模板

自定義的 HTML 文檔直接插入到 <el-option> 中

 1 <el-select v-model="val4" placeholder="請輸入">
 2     <el-option v-for="item in options" :label="item.value" :value="item.key">
 3         <span>{{ item.value }}</span><span style="float:right">{{ item.key }}</span>
 4     </el-option>
 5 </el-select>
 6 options: [
 7     {key: "apple", value: "蘋果"},
 8     {key: "huawei", value: "華爲"},
 9     {key: "vivo", value: "Vivo"},
10     {key: "oppo", value: "OPPO"},
11     
12     ],
13     val4: '',

自定義模板

分組

<el-option-group> 對備選項進行分組，他的 label 屬性爲分組名。

<tips: 注意 group 與 option 兩次循環邏輯>

 1 <el-select v-model="val5" clearable>
 2     <el-option-group v-for="item in options2" :label="item.label" :key="item.label">
 3         <el-option v-for="city in item.cities" :label="city.label" :value="city.value"></el-option>
 4     </el-option-group>
 5 </el-select>
 6 
 7 
 8 options2:[
 9     {label: "熱門城市",cities:[{value: "shanghai", label: "上海"}, {value: "guangzhou", label: "廣州"}]},
10     {label: "城市名稱",cities:[{value:"zhengzhou", label: "鄭州"}, {value: "wuhan", label: "武漢"}, {value:"chengdu", label: "成都"}]}
11 ],

分組