Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

基础用法

yt

st

邮政快递

京东快递

顺丰速运

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

<template>
  <j-select v-model="value" placeholder="请选择" clearable>
    <j-option value="yt" label="圆通快递"></j-option>
    <j-option value="st" label=" 申通快递"></j-option>
    <j-option value="yz">
      邮政快递
    </j-option>
    <j-option value="jd">
      京东快递
    </j-option>
    <j-option value="sfsy">
      顺丰速运
    </j-option>
  </j-select>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

显示代码 复制代码 复制代码

尺寸

shanghai

beijing

shanxi

henan

sichuan

shanghai

beijing

shanxi

henan

sichuan

shanghai

beijing

shanxi

henan

sichuan

可通过 width-size 传入数值设置输入框的宽度，此外还提供了large和small两种类名设置输入框高度。

<template>
  <j-select class="small" v-model="value" placeholder="请选择" :width-size="1">
    <j-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </j-option>
  </j-select>
  <j-select v-model="value2" placeholder="请选择" :width-size="2">
    <j-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </j-option>
  </j-select>
  <j-select class="large" v-model="value3" placeholder="请选择" :width-size="3">
    <j-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </j-option>
  </j-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'shanghai',
          label: '上海'
        }, {
          value: 'beijing',
          label: '北京'
        }, {
          value: 'shanxi',
          label: '山西'
        }, {
          value: 'henan',
          label: '河南'
        }, {
          value: 'sichuan',
          label: '四川'
        }],
        value: '',
        value2: '',
        value3:''
      }
    }
  }
</script>

显示代码 复制代码 复制代码

多选

用 Tag 展示已选项

yt

st

邮政快递

京东快递

顺丰速运

yt

st

邮政快递

京东快递

顺丰速运

设置multiple属性启用多选,此时v-model的值为当前选中值所组成的数组；
设置collapse-tags可折叠展示选中项。

<template>
  <j-select v-model="value" placeholder="请选择" :width-size="3" multiple>
    <j-option value="yt" label="圆通快递"></j-option>
    <j-option value="st" label=" 申通快递"></j-option>
    <j-option value="yz">
      邮政快递
    </j-option>
    <j-option value="jd">
      京东快递
    </j-option>
    <j-option value="sfsy">
      顺丰速运
    </j-option>
  </j-select>
  <j-select v-model="value" placeholder="请选择" :width-size="3" multiple collapse-tags >
    <j-option value="yt" label="圆通快递"></j-option>
    <j-option value="st" label=" 申通快递"></j-option>
    <j-option value="yz">
      邮政快递
    </j-option>
    <j-option value="jd">
      京东快递
    </j-option>
    <j-option value="sfsy">
      顺丰速运
    </j-option>
  </j-select>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

显示代码 复制代码 复制代码

禁用

选择器 || 选择项 不可用状态

shanghai

beijing

shanxi

henan

sichuan

shanghai

beijing

shanxi

henan

sichuan

在j-select上设置disabled值为 true 时禁用整个选择框
在j-option中，设定disabled值为 true 时禁用该选项

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

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'shanghai',
          label: '上海'
        }, {
          value: 'beijing',
          label: '北京',
          disabled: true
        }, {
          value: 'shanxi',
          label: '山西'
        }, {
          value: 'henan',
          label: '河南',
          disabled: true
        }, {
          value: 'sichuan',
          label: '四川'
        }],
        value: '',
        value2: ''
      }
    }
  }
</script>

显示代码 复制代码 复制代码

清空单选

shanghai

beijing

shanxi

设置clearable属性，可将选择器清空，仅适用于单选。

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

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'shanghai',
          label: '上海'
        }, {
          value: 'beijing',
          label: '北京'
        }, {
          value: 'shanxi',
          label: '山西'
        }],
        value: ''
      }
    }
  }
</script>

显示代码 复制代码 复制代码

可搜索

可搜索查找快速匹配选项

shanghai

beijing

shanxi

henan

sichuan

添加filterable属性启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。

<template>
  <j-select v-model="value" filterable placeholder="请选择" no-match-text="没有啦！！！">
    <j-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </j-option>
  </j-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'shanghai',
          label: '上海'
        }, {
          value: 'beijing',
          label: '北京',
          disabled: true
        }, {
          value: 'shanxi',
          label: '山西'
        }, {
          value: 'henan',
          label: '河南',
          disabled: true
        }, {
          value: 'sichuan',
          label: '四川'
        }],
        value: ''
      }
    }
  }
</script>

显示代码 复制代码 复制代码

远程搜索

远程搜索查找选项

添加filterable，remote，remote-method属性启用搜索功能, loading 可用于remoteMethod查找缓慢给个加载中提示

<template>
  <j-select v-model="value" placeholder="请选择" filterable remote :loading="loading" :remote-method="remoteMethod"
  >
    <j-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </j-option>
  </j-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        value: '',
        loading: false
      }
    },
    methods: {
      remoteMethod(query)
      {
        if (query !== '')
        {
          this.loading = true;
          remoteApi().then(res=>{
            this.loading = false;
            this.options = res
          })
        }
        else
        {
          this.options = [];
        }
      }
    }
  }
</script>

显示代码 复制代码 复制代码

TIP

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

Select Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
width-size	选择框尺寸	number	高度可添加类名large和small控制	—
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
no-match-text	搜索条件无匹配时显示的文字，也可以使用slot="empty"设置	string	—	无匹配数据
no-data-text	选项为空时显示的文字，也可以使用slot="empty"设置	string	—	无数据

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 Attributes

参数	说明	类型	可选值	默认值
value	选项的值	string/number/object	—	—
label	选项的标签，若不设置则默认与 value 相同	string/number	—	—
disabled	是否禁用该选项	boolean	—	false

Methods

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