Select 选择器+Cascader 级联选择器

基础用法

<template>
    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
    export default {
        name: "Input",
        data(){
          return {
            options: [{
            value: '选项1',
            label: '黄金糕'
        }, {
            value: '选项2',
            label: '双皮奶'
        }, {
            value: '选项3',
            label: '蚵仔煎'
        }, {
            value: '选项4',
            label: '龙须面'
        }, {
            value: '选项5',
            label: '北京烤鸭'
        }],
        value: ''
          }
        },
    }
</script>
<style>
</style>

效果:

禁用

对于某一个选项禁用
在el-option中，设定disabled值为 true，即可禁用该选项

value: '选项2',
label: '双皮奶',
disabled: true

整个禁用
为el-select设置disabled属性，则整个选择器不可用

基础多选

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。
默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。
简单用法

<template>
    <el-select v-model="value1" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
    export default {
        name: "Input",
        data(){
          return {
            options: [{
            value: '选项1',
            label: '黄金糕'
        }, {
            value: '选项2',
            label: '双皮奶'
        }, {
            value: '选项3',
            label: '蚵仔煎'
        }, {
            value: '选项4',
            label: '龙须面'
        }, {
            value: '选项5',
            label: '北京烤鸭'
        }],
        value1: ''
          }
        },
    }
</script>

<style>
    
</style>

Cascader 级联选择器

基础用法

点击时扩展

<template>
    <div class="cascader">
       <el-cascader v-model="value"
                    :options="options">
       </el-cascader>
    </div>
</template>

<script>
    export default {
        name: "cascader",
        data(){
          return {
            value : '',
            options : [
              {
              value : 1,
              label : '二级菜单',
              children : [
                {
                value : 11,
                label : '北京'
                },
                {
                value : 12,
                label : '上海'
                },
              ]
            }
            ]
          }
    }
  }
</script>

<style>
    
</style>

悬停时扩展
添加一句语句即可

<el-cascader v-model="value"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }">
</el-cascader>

仅显示最后一级
可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

<el-cascader :options="options" :show-all-levels="false"></el-cascader>

多选