010_Select选择器
1. Select选择器
1.1. 当选项过多时, 使用下拉菜单展示并选择内容。
1.2. Select属性
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
绑定值 |
boolean / string / number |
无 |
无 |
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 |
placeholder |
占位符 |
string |
无 |
请选择 |
filterable |
是否可搜索 |
boolean |
无 |
false |
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 |
1.3. Select事件
事件名称 |
说明 |
回调参数 |
change |
选中值发生变化时触发 |
目前的选中值 |
visible-change |
下拉框出现/隐藏时触发 |
出现则为true, 隐藏则为false |
remove-tag |
多选模式下移除tag时触发 |
移除的tag值 |
clear |
可清空的单选模式下用户点击清空按钮时触发 |
无 |
blur |
当input失去焦点时触发 |
(event: Event) |
focus |
当input获得焦点时触发 |
(event: Event) |
1.4. Select Slots
name |
说明 |
— |
Option组件列表 |
prefix |
Select组件头部内容 |
empty |
无选项时的列表 |
1.5. Option Group属性
参数 |
说明 |
类型 |
默认值 |
label |
分组的组名 |
string |
无 |
disabled |
是否将该分组下所有选项置为禁用 |
boolean |
false |
1.6. Option属性
参数 |
说明 |
类型 |
默认值 |
value |
选项的值 |
string/number/object |
无 |
label |
选项的标签, 若不设置则默认与value相同 |
string/number |
无 |
disabled |
是否禁用该选项 |
boolean |
false |
1.7. 方法
事件名称 |
说明 |
focus |
在Input获得焦点 |
blur |
使input失去焦点, 并隐藏下拉框 |
2. Select选择器例子
2.1. 使用脚手架新建一个名为element-ui-select的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Select from '../components/Select.vue'
import MultipleSelect from '../components/MultipleSelect.vue'
import SearchSelect from '../components/SearchSelect.vue'
import RemoteSearchSelect from '../components/RemoteSearchSelect.vue'
import CreateSelect from '../components/CreateSelect.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Select' },{ path: '/Select', component: Select },{ path: '/MultipleSelect', component: MultipleSelect },{ path: '/SearchSelect', component: SearchSelect },{ path: '/RemoteSearchSelect', component: RemoteSearchSelect },{ path: '/CreateSelect', component: CreateSelect }
]const router = new VueRouter({routes
})export default router
2.3. 在components下创建Select.vue
<template><div><h1>基础用法-适用广泛的基础单选</h1><h4>v-model的值为当前被选中的el-option的value属性值。</h4><el-select v-model="base_value" placeholder="请选择"><el-option v-for="item in base_options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><h1>有禁用选项</h1><h4>在el-option中, 设定disabled值为true, 即可禁用该选项。</h4><el-select v-model="disabled_value" placeholder="请选择"><el-option v-for="item in disabled_options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option></el-select><h1>禁用状态-选择器不可用状态</h1><h4>为el-select设置disabled属性, 则整个选择器不可用。</h4><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><h1>可清空单选</h1><h4>为el-select设置clearable属性, 则可将选择器清空。需要注意的是, clearable属性仅适用于单选。</h4><el-select v-model="clearable_value" clearable placeholder="请选择"><el-option v-for="item in clearable_options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div>
</template><script>
export default {data () {return {base_options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],base_value: '',disabled_options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶',disabled: true}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],disabled_value: '',options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: '',clearable_options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],clearable_value: ''}}
}
</script>
2.4. 在components下创建MultipleSelect.vue
<template><div><h1>基础多选-适用性较广的基础多选, 用Tag展示已选项</h1><h4>为el-select设置multiple属性即可启用多选, 此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以Tag的形式展现, 你也可以设置collapse-tags属性将它们合并为一段文字。</h4><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><h1>自定义模板-可以自定义备选项</h1><h4>将自定义的HTML模板插入el-option的slot中即可。</h4><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><h1>分组-备选项进行分组展示</h1><h4>使用el-option-group对备选项进行分组, 它的label属性为分组名。</h4><el-select v-model="group_value" placeholder="请选择"><el-option-group v-for="group in group_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></div>
</template><script>
export default {data () {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value1: [],value2: [],cities: [{value: 'Beijing',label: '北京'}, {value: 'Shanghai',label: '上海'}, {value: 'Nanjing',label: '南京'}, {value: 'Chengdu',label: '成都'}, {value: 'Shenzhen',label: '深圳'}, {value: 'Guangzhou',label: '广州'}],value: '',group_options: [{label: '热门城市',options: [{value: 'Shanghai',label: '上海'}, {value: 'Beijing',label: '北京'}]}, {label: '城市名',options: [{value: 'Chengdu',label: '成都'}, {value: 'Shenzhen',label: '深圳'}, {value: 'Guangzhou',label: '广州'}, {value: 'Dalian',label: '大连'}]}],group_value: ''}}
}
</script>
2.5. 在components下创建SearchSelect.vue
<template><div><h1>可搜索-可以利用搜索功能快速查找选项</h1><h4>为el-select添加filterable属性即可启用搜索功能。默认情况下, Select会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑, 可以通过传入一个filter-method来实现。filter-method为一个Function, 它会在输入值发生变化时调用, 参数为当前输入值。</h4><el-select v-model="value" filterable placeholder="请选择" :filter-method="filterMethod"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div>
</template><script>
export default {data () {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}},methods: {filterMethod (query) {console.log(query)}}
}
</script>
2.6. 在components下创建RemoteSearchSelect.vue
<template><div><h1>远程搜索-从服务器搜索数据, 输入关键字进行查找</h1><h4>为了启用远程搜索, 需要将filterable和remote设置为true, 同时传入一个remote-method。remote-method为一个Function, 它会在输入值发生变化时调用, 参数为当前输入值。需要注意的是, 如果el-option是通过v-for指令渲染出来的, 此时需要为el-option添加key属性, 且其值需具有唯一性, 比如此例中的item.value。</h4><el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div>
</template><script>
export default {data () {return {options: [],value: [],list: [],loading: false,states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois','Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana','Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania','Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']}},mounted () {this.list = this.states.map(item => {return { value: `value:${item}`, label: `label:${item}` }})},methods: {remoteMethod (query) {if (query !== '') {this.loading = truesetTimeout(() => {this.loading = falsethis.options = this.list.filter(item => {return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1})}, 200)} else {this.options = []}}}
}
</script>
2.7. 在components下创建CreateSelect.vue
<template><div><h1>创建条目-可以创建并选中选项中不存在的条目</h1><h4>使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性, 在该属性打开的情况下, 按下回车就可以选中当前选项列表中的第一个选项, 无需使用鼠标或键盘方向键进行定位。</h4><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></div>
</template><script>
export default {data () {return {options: [{value: 'HTML',label: 'HTML'}, {value: 'CSS',label: 'CSS'}, {value: 'JavaScript',label: 'JavaScript'}],value: []}}
}
</script>
2.8. 运行项目, 访问http://localhost:8080/#/Select
2.9. 运行项目, 访问http://localhost:8080/#/MultipleSelect
2.10. 运行项目, 访问http://localhost:8080/#/SearchSelect
2.11. 运行项目, 访问http://localhost:8080/#/RemoteSearchSelect
2.12. 运行项目, 访问http://localhost:8080/#/CreateSelect
010_Select选择器相关推荐
- CSS 选择器:BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
- xpath选择器简介及如何使用
xpath选择器简介及如何使用 一.总结 一句话总结:XPath 的全称是 XML Path Language,即 XML 路径语言,它是一种在结构化文档(比如 XML 和 HTML 文档)中定位信息 ...
- css选择器及float(浮动)
--------------------------选择器( css有就近原则)------------------------------- 选择器名称 在css表的 ...
- html5类选择器选择权重,Python Html5和CSS3的新增功能:CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
- 浅谈对html css的理解,HTML+CSS入门 CSS选择器 、属性和值浅谈
body { font-size: 0.8em; color: navy; } 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时, ...
- php表单偶数变颜色,利用CSS3 nth-child()选择器 实现表格奇偶行变色
nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...
- FPGA(3)验证数字逻辑(与门、与非门、二选一数据选择器、2-4译码器、半加器、全加器)
目录 一.验证与门 二.验证与非门 三.验证二选一数据选择器 四.验证2-4译码器 五.验证半加器 六.验证全加器 0.初始化定义 1.第一个半加器 2.第二个半加器 3.得到最终进位Co 代码 0决 ...
- 【代码笔记】Web-CSS-CSS id和Class选择器
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 任务二:1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系...
1.选择器类型 标签选择器,类选择器,ID选择器,组合选择器,伪类和伪元素,属性选择器,子选择器,同胞选择器, :not()选择器 1.同胞选择器 相邻同胞标签: h2 + p{ color:red; ...
最新文章
- React+Redux+中间件
- 12.前K个高频元素---使用优先队列和哈希表解决
- fragment之间通信
- 组图:1904年圣路易斯奥运会
- gcc oracle mysql_Linux下C语言访问Oracle数据库Demo
- (转)基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理...
- Windows Store App 图像
- h标签在seo中的作用(技术优化)
- 机器学习实战系列(七):数值回归与预测
- 谍影重重,由片名想起
- uni-app实现微信小程序一键登录
- Win10分辨率不能调怎么办
- 计算机网络设备子系统,关于设备间子系统的几点知识学习
- 记一个embed嵌入flash、mp4播放视频
- 量化专业术语——转自BigQuant
- 7-19 统计人数(2008慈溪) (100分)
- Python中文社区新专栏作者计划
- android设置左右声道音量,android控制左右声道实例
- ssm+redis整合(通过cache方式)
- 字节数组与字节流、缓冲字节流、字符流、缓冲字符流、对象流