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 ],

分组