@rrc-materials/select

---

showNav: true

Select

@rrc-materials/select for rrc fork element-ui select 增加js 写入项和全选取消全选 如果升级 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>

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 获取焦点	-