Appearance

Return to top
On this page

Select 选择器

基本使用

选择器的基本用法

可以传入一个options数组来实现下拉项的渲染

显示代码
html
<template>
  <n-select :options="options" v-model="selectVal" @change="changeSelect" />
</template>

<script setup>
  import { reactive, ref } from 'vue';
  const state = reactive({
    options: [
      {
        label: '中国',
        value: 'china',
      },
      {
        label: '日本',
        value: 'japan',
      },
      {
        label: '美国',
        value: 'usa',
      },
      {
        label: '俄罗斯',
        value: 'russia',
      },
      {
        label: '韩国',
        value: 'korea',
      },
    ],
  });
  const { options } = state;
  const selectVal = ref('china');
  const changeSelect = item => {
    console.log(selectVal.value);
    console.log(item);
  };
</script>

禁用

禁用可以分为输入框禁用和下拉选项禁用

输入框禁用


下拉选项禁用


显示代码
html
<template>
  <n-select
    :options="options1"
    v-model="selectVal2"
    @change="changeSelect"
    disabled
    placeholder="请选择内容"
  />
  <n-select :options="options2" v-model="selectVal3" @change="changeSelect" />
</template>

<script setup>
  import { reactive, ref } from 'vue';
  const state = reactive({
    options1: [
      {
        label: '中国',
        value: 'china',
      },
      {
        label: '日本',
        value: 'japan',
      },
      {
        label: '美国',
        value: 'usa',
      },
      {
        label: '俄罗斯',
        value: 'russia',
      },
      {
        label: '韩国',
        value: 'korea',
      },
    ],
    options2: [
      {
        label: '中国',
        value: 'china',
      },
      {
        label: '日本',
        value: 'japan',
        disabled: true,
      },
      {
        label: '美国',
        value: 'usa',
      },
      {
        label: '俄罗斯',
        value: 'russia',
        disabled: true,
      },
      {
        label: '韩国',
        value: 'korea',
      },
    ],
  });
  const { options } = state;
  const selectVal2 = ref('');
  const selectVal3 = ref('');
  const changeSelect = item => {
    console.log(item);
  };
</script>

可过滤搜索

通过设置 searchable 属性来开启过滤搜索

显示代码
html
<template>
  <n-select multiple :options="options1" v-model="selectVal4" @change="changeSelect" />
</template>

<script setup>
  import { reactive, ref } from 'vue';
  const state = reactive({
    options1: [
      {
        label: '中国',
        value: 'china',
      },
      {
        label: '日本',
        value: 'japan',
      },
      {
        label: '美国',
        value: 'usa',
      },
      {
        label: '俄罗斯',
        value: 'russia',
      },
      {
        label: '韩国',
        value: 'korea',
      },
    ],
  });
  const { options } = state;
  const selectVal4 = ref([]);
  const changeSelect = item => {
    console.log(item);
  };
</script>

多选

通过设置 multiple 属性来开启多选

显示代码
html
<template>
  <n-select multiple :options="options1" v-model="selectVal5" @change="changeSelect" />
</template>

<script setup>
  import { reactive, ref } from 'vue';
  const state = reactive({
    options1: [
      {
        label: '中国',
        value: 'china',
      },
      {
        label: '日本',
        value: 'japan',
      },
      {
        label: '美国',
        value: 'usa',
      },
      {
        label: '俄罗斯',
        value: 'russia',
      },
      {
        label: '韩国',
        value: 'korea',
      },
    ],
  });
  const { options } = state;
  const selectVal5 = ref([]);
  const changeSelect = item => {
    console.log(item);
  };
</script>

自定义 label 和 value

可以通过传入 fieldLabel和fieldValue属性实现自定义 label 和 value

显示代码
html
<template>
  <n-select
    :options="options3"
    fieldLabel="name"
    fieldValue="id"
    v-model="selectVal6"
    @change="changeSelect"
  />
</template>

<script setup>
  import { reactive, ref } from 'vue';
  const state = reactive({
    options3: [
      {
        name: '中国',
        id: 'china',
      },
      {
        name: '日本',
        id: 'japan',
      },
      {
        name: '美国',
        id: 'usa',
      },
      {
        name: '俄罗斯',
        id: 'russia',
      },
      {
        name: '韩国',
        id: 'korea',
      },
    ],
  });
  const { options } = state;
  const selectVal6 = ref('');
  const changeSelect = item => {
    console.log(item);
  };
</script>

API

参数说明类型可选值默认值
v-model绑定的值string————
width输入框长度string————
options下拉选项Array————
disabled是否禁用boolean——false
fieldLabel自定义标签string——'label'
fieldValue自定义值string——'value'
placeholder占位文字string——'请选择'
searchable是否可搜索(支持单选)boolean——false
searchable是否可多选boolean——false

Events

事件名称说明回调参数
changeselect 状态发生变化时的回调函数新选项的值