Select选择器

最新推荐文章于 2024-05-09 22:13:34 发布

一只爱好编程的程序猿

最新推荐文章于 2024-05-09 22:13:34 发布

阅读量3.9k

点赞数 1

分类专栏： Element-UI 文章标签： vue

本文链接：https://blog.csdn.net/qq_37881565/article/details/108278865

版权

Element-UI 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

基础用法

v-model的值为当前被选中的el-option的value属性值

<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 {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

效果图如下所示:

有禁用选项

在el-option中，设定disabled值为true，即可禁用选项。

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

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

效果图如下所示:

禁用状态

选择器不可用状态

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

<template>
  <el-select v-model="value" disabled 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 {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

效果图如下所示:

可清空单选

包含清空按钮，可将选择器清空为初始状态。为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

<template>
  <el-select v-model="value" clearable 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 {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

基础多选

为el-select设置multiple属性即可启用多选，此时el-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>

  <el-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    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 {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
        value2: []
      }
    }
  }
</script>

效果图如下所示:

自定义模板

将自定义的HTML模板插入el-option的slot中即可。

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],
        value: ''
      }
    }
  }
</script>

效果图如下所示:

分组

使用el-option-group对备选项进行分组，它的label属性为分组名

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

<script>
  export default {
    data() {
      return {
        options: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        value: ''
      }
    }
  }
</script>

效果图如下所示:

创建条目

使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意，此时 filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    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 {
    data() {
      return {
        options: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value: []
      }
    }
  }
</script>

效果图如下所示:

Select Attributes

参数说明类型可选值默认值

value/v-model 绑定值 boolean/string/nubmer —— ——

multiple 是否多选 boolean —— false

disabled 是否禁用 boolean —— false

value-key 作为value唯一标识的键名，绑定值为对象类型是必填 string —— value

size 输入框尺寸 string medium/small/mini ——

clearable 是否可以清空选项 boolean —— false

collapse-tags 多选时是否将选中值按文字的形式展示 boolean —— false

multiple-limit 多选时用户最多可以选择的条目数，为0则不限制 number —— 0

name select input的name属性 string —— ——

autocomplete

select input的autocomplete属性

string

——

off

auto-complete 下个版本弃用 string —— off

placeholder 占位符 string —— 请选择

filterable 是否可搜索 boolean —— off

allow-create 是否允许用户创建新条目，需要配合 filterable使用 boolean —— false

filter-method 自定义搜素方法 function —— ——

remote 是否为远程搜索 boolean —— false

remote-method 远程搜索方法 function —— ——

loading 是否正在从远程获取数据 boolean —— false

loading-text 远程加载是显示的文字 string —— 加载中

no-match-text 搜索条件无法匹配时显示的文字，也可以使用slot=“empty”设置 string —— 无匹配数据

no-data-text 选项为空时显示的文字，也可以使用 slot=“empty” string —— 无数据

popper-class select下拉框的类名 string —— ——

reserve-keyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 boolean —— false

default-first-option

在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用

boolean

——

false

popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false boolean —— true

automatic-dropdown 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 boolean —— false

Select Events

事件名称	说明	回调函数
change	选中值发生变化时触发	目前的选中值
visible-change	下拉框出现/隐藏式触发	出现则为true，隐藏则为false
remove-tag	多选模式下移除tag时触发	移除的tag值
clear	可清空的单选模式下用户点击清空按钮是触发	——
blur	当input失去焦点是触发	（event：Event）
focus	当input获取焦点时触发	（event:Event）

Select Slots

name	说明
——	Option组件列表
prefix	Select组件头部内容
empty	无选项时的列表

Option Group Attributes

参数	说明	类型	可选值	默认值
label	分组的组名	string	——	——
disabled	是否将该分组下所有选项为禁用	boolean	——	false

Option Attributes

参数	说明	类型	可选值	默认值
value	选项的值	string/number/object	——	——
label	选项的标签	string/number	——	——
disabled	是否禁用该选项	boolean	——	false

Methods

方法名	说明	参数
focus	使input获取焦点	——
blur	使input失去焦点，并隐藏下拉框	——

一只爱好编程的程序猿

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Select选择器

基础用法v-model的值为当前被选中的el-option的value属性值<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-op
复制链接

扫一扫

专栏目录