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: "成都"}]}
],