showNav: true
Select
<script> import Basic from './demo/basic.md' import Multiple from './demo/multiple.md' import Object from './demo/object.md' import Form from './demo/form.md' export default { components: { Basic, Multiple, Object, Form }, data() { return { value3: '', value4: '', value5: '', cityOptions: { '北京': '0', '吉林': '1', '上海': '2', '天津': '3', '深圳': '4' }, languageOptions: { 'HTML': '0', 'JavaScript': '1', 'CSS': '2', 'Java': '3', 'PHP': '4', 'C++': '5', 'C#': '6' }, fruitOptions: { '苹果': '0', '橙子': '1', '鸭梨': '2', '香蕉': '3', '葡萄': '4', '西瓜': '5', '柿子': '6' } } }, methods: { checkedAll(value) { console.log('打印当前选中的值', value) } } } </script>
@rrc-materials/select
for rrc fork element-ui select 增加js 写入项和全选取消全选 如果升级 select 的话这里以需要做更改
Select 选择器
当选项过多时,使用下拉菜单展示并选择内容,包括全选和取消全选操作。
:::tip
注意: Element-UI
的属性和方法都适用。
:::
基本用法
基础多选
选中值是对象
可清空单选
包含清空按钮,可将选择器清空为初始状态。为 rc-select
设置 clearable
属性,则可将选择器清空。需要注意的是,clearable
属性仅适用于单选。
:::demo
<rc-select :data="cityOptions" clearable v-model="value3" filterable></rc-select>
<script>
export default {
data() {
return {
value3: '',
cityOptions: {
'北京': '0',
'吉林': '1',
'上海': '2',
'天津': '3',
'深圳': '4'
}
}
}
}
</script>
:::
可搜索
可以利用搜索功能快速查找选项。为 rc-select
设置 filterable
属性,则可实现快速搜索。
:::demo
<rc-select :data="languageOptions" v-model="value4" filterable></rc-select>
<script>
export default {
data() {
return {
value4: '',
languageOptions: {
'HTML': '0',
'JavaScript': '1',
'CSS': '2',
'Java': '3',
'PHP': '4',
'C++': '5',
'C#': '6'
}
}
}
}
</script>
:::
禁用状态
选择器不可用状态。为 rc-select
设置 disabled
属性,则可实现禁用选择器。
:::demo
<rc-select :data="fruitOptions" v-model="value5" disabled></rc-select>
<script>
export default {
data() {
return {
value5: '',
fruitOptions: {
'苹果': '0',
'橙子': '1',
'鸭梨': '2',
'香蕉': '3',
'葡萄': '4',
'西瓜': '5',
'柿子': '6'
}
}
}
}
</script>
:::
和form 一起使用
Attributes
参数 | 说明 | 可选值 | 类型 | 默认值 |
---|---|---|---|---|
data | 需要渲染的数据 | - | Object | - |
props | 当值 是数组时 可以重定向key 值 | - | Object | { label: 'label', value: 'value' } |
multipleSelectedText | 多选操作时显示的文本 | - | String | 已选中 xx 个选项 |
multiple | 是否多选 | - | boolean | false |
disabled | 是否禁用 | - | boolean | false |
size | 输入框尺寸 | medium/small/mini | String | - |
clearable | 单选时是否可以清空 | - | boolean | false |
collapse-tags | 需要渲染的数据 | - | Object | - |
multiple-limit | 多选时用户最多可以选择的项目数,为 0 | - | number | 0 |
name | select input 的 name 属性 | - | string | - |
auto-complete | select input 的 autocomplete 属性 | - | string | off |
placeholder | 占位符 | 请选择 | String | - |
filterable | 是否可搜索 | - | boolean | false |
filter-method | 自定义搜索方法 | - | function | - |
remote | 是否为远程搜索 | - | boolean | false |
remote-method | 远程搜索方法 | - | function | - |
loading | 是否正在从远程获取数据 | - | boolean | false |
... | 其他属性请看 ElementUI文档 | - | - | - |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
input | 点击全选或取消全选时触发的回调 | - |
change | 选中值发生变化时触发 | 目前的选中值 |
visible-change | 下拉框出现/隐藏时触发 | 出现则为 true,隐藏则为 false |
remove-tag | 多选模式下移除tag时触发 | 移除的tag值 |
clear | 可清空的单选模式下用户点击清空按钮时触发 | - |
blur | 当 input 失去焦点时触发 | (event: Event) |
focus | 当 input 获得焦点时触发 | (event: Event) |
Methods
方法名 | 说明 | 参数 |
---|---|---|
focus | 使 input 获取焦点 | - |