showNav: true

Select

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