V3 Element

Appearance

On this page

Select 选择器 ​

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

基础用法 ​

适用广泛的基础单选 v-model 的值为当前被选中的 option 的 value 属性值。

<template>
  <vk-select
    v-model="test"
    placeholder="基础选择器，请选择"
    :options="options2"
  />
</template>
<script setup>
import { ref } from 'vue';

const test = ref('1');
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
];
</script>

可清空单选 ​

您可以使用清除图标来清除选择。

设置 clearable 属性，则可将选择器清空。

<template>
  <vk-select
    v-model="test"
    placeholder="可清空选择器，请选择"
    :options="options2"
    clearable
  />
</template>

<script setup>
import { ref } from 'vue';

const test = ref('1');
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
];
</script>

自定义模板 ​

你可以自定义如何来渲染每一个选项, 使用 renderLabel 属性，它接受一个回调函数，返回 VNode 类型。

<template>
  <vk-select
    v-model="test"
    placeholder="基础选择器，请选择"
    :options="options2"
    :renderLabel="customRender"
  />
</template>
<script setup>
import { ref, h } from 'vue';

const test = ref('');
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
];
const customRender = (option) => {
  return h('div', { className: 'xyz' }, [
    h('b', option.label),
    h('span', option.value)
  ]);
};
</script>

<style>
.vk-select__menu-item,
.xyz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>

筛选选项 ​

可以利用筛选功能快速查找选项。

添加 filterable 属性即可启用搜索功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。

<template>
  <vk-select
    v-model="test"
    placeholder="可以过滤的选择器，请输入"
    :options="options2"
    filterable
  />
</template>

<script setup>
import { ref } from 'vue';

const test = ref('');
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
];
</script>

远程搜索 ​

输入关键字以从远程服务器中查找数据。

服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将 filterable 和 remote 设置为 true，同时传入一个remote-method。 remote-method 为一个返回 Promise 的 Function，类型为 (value: string) => Promise<SelectOption[]> 。

<template>
  <vk-select
    v-model="test"
    placeholder="搜索远程结果"
    filterable
    remote
    :remote-method="handleFetch"
  />
</template>

<script setup>
import { ref } from 'vue';

const test = ref('');

const handleFetch = (query) => {
  if (!query) return Promise.resolve([]);
  return fetch(`https://api.github.com/search/repositories?q=${query}`)
    .then((res) => res.json())
    .then(({ items }) => {
      return items
        .slice(0, 10)
        .map((item) => ({ label: item.name, value: item.node_id }));
    });
};
</script>

API ​

属性 ​

属性名说明类型默认值
model-value / v-model选中项绑定值string-
disabled是否禁用booleanfalse
options下拉框选项SelectOption[][]
placeholder占位符string-
clearable是否可以清空选项booleanfalse
renderLabel自定义选项模板(option: SelectOption) => VNode-
filterableSelect 组件是否可筛选booleanfalse
filterMethod自定义筛选方法(value: string) => SelectOption[]-
remote其中的选项是否从服务器远程加载booleanfalse
remoteMethod自定义远程搜索方法(value: string) => Promise<SelectOption[]>-

事件 ​

事件名描述类型
change选中值发生变化时触发(value: string) => void
visible-change下拉框出现/隐藏时触发(value: boolean) => void
clear在点击由 clearable 属性生成的清空按钮时触发() => void

SelectOption ​

属性名说明类型默认值
label选项显示的文字string-
value选项的值string-
disabled是否禁用booleanfalse