elementUI 学习入门之 Select 选择器

Select 选择器

基础用法

 <el-select v-model="val1" placeholder="请输入">
     <el-option v-for="item in options" :label="item.value" :value="item.key" :disabled="item.disabled">
     </el-option>
 </el-select>

 options: [
     {key: "选项一", value: "苹果"},
     {key: "选项二", value: "华为"},
     {key: "选项三", value: "Vivo"},
     {key: "选项四", value: "OPPO", disabled:true},

     ],
     val1: ''

基础选择器

如果 disabled 放在 <el-option> 中，则此选项不可用；若 disabled 放在 <el-select> 中，则整个选择器不可用

可清空单选

为 <el-select> 设置 clearable 属性，可将选择器清空（仅限于单选）

多选

为 <el-select> 设置 multiple 属性，v-model 的值为此时选中值组成的数组

 <el-select v-model="val3" placeholder="请输入" multiple>
     <el-option v-for="item in options" :label="item.value" :value="item.key">
     </el-option>
 </el-select>

 options: [
     {key: "选项一", value: "苹果"},
     {key: "选项二", value: "华为"},
     {key: "选项三", value: "Vivo"},
     {key: "选项四", value: "OPPO", disabled:true},

     ],
     val3: [],

基础多选

自定义模板

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

 <el-select v-model="val4" placeholder="请输入">
     <el-option v-for="item in options" :label="item.value" :value="item.key">
         <span>{{ item.value }}</span><span style="float:right">{{ item.key }}</span>
     </el-option>
 </el-select>
 options: [
     {key: "apple", value: "苹果"},
     {key: "huawei", value: "华为"},
     {key: "vivo", value: "Vivo"},
     {key: "oppo", value: "OPPO"},

     ],
     val4: '',

自定义模板

分组

<el-option-group> 对备选项进行分组，他的 label 属性为分组名。

<tips: 注意 group 与 option 两次循环逻辑>

 <el-select v-model="val5" clearable>
     <el-option-group v-for="item in options2" :label="item.label" :key="item.label">
         <el-option v-for="city in item.cities" :label="city.label" :value="city.value"></el-option>
     </el-option-group>
 </el-select>

 options2:[
     {label: "热门城市",cities:[{value: "shanghai", label: "上海"}, {value: "guangzhou", label: "广州"}]},
     {label: "城市名称",cities:[{value:"zhengzhou", label: "郑州"}, {value: "wuhan", label: "武汉"}, {value:"chengdu", label: "成都"}]}
 ],

分组