ERP 组件库

Appearance

选择器 Select ​

当用户需要从一组同类数据中选择一个或多个时，可以使用下拉选择器，点击后选择对应项。

基本用法 ​

选择器的基本用法。 通过 trigger-props 属性自定义下拉框的属性，比如可以让下拉框自动适应最小宽度。

代码事例
vue

<template>
  <fk-space direction="vertical" size="large">
    <fk-select :style="{width:'320px'}" placeholder="Please select ...">
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
    </fk-select>
    <fk-select :style="{width:'320px'}" placeholder="Please select ...">
      <fk-option :value="true">是</fk-option>
      <fk-option :value="false">否</fk-option>
    </fk-select>
    <fk-select default-value="Beijing" :style="{width:'320px'}" placeholder="Please select ..." disabled>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
    </fk-select>
    <fk-select v-model="value" :style="{width:'320px'}" placeholder="Please select ...">
      <fk-option v-for="item of data" :value="item" :label="item.label" />
    </fk-select>
    <div>Select Value: {{ value }}</div>
    <fk-select :style="{width:'160px'}" placeholder="Select" :trigger-props="{ autoFitPopupMinWidth: true }">
      <fk-option>Beijing-Beijing-Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
    </fk-select>
    
  </fk-space>
</template>

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

export default {
  setup() {
    const value = ref();
    const data = [{
      value: 'beijing',
      label: 'Beijing',
      other: 'extra'
    }, {
      value: 'shanghai',
      label: 'Shanghai',
      other: 'extra'
    }, {
      value: 'guangzhou',
      label: 'Guangzhou',
      other: 'extra'
    }, {
      value: 'chengdu',
      label: 'Chengdu',
      other: 'extra'
    }]

    return {
      value,
      data
    }
  },
}
</script>

允许清除 ​

通过设置 allow-clear ，显示清除按钮。

代码事例
vue

<template>
  <fk-select v-model="value" :style="{width:'320px'}" placeholder="Please select ..." allow-clear>
    <fk-option>Beijing</fk-option>
    <fk-option>Shanghai</fk-option>
    <fk-option>Guangzhou</fk-option>
    <fk-option disabled>Disabled</fk-option>
  </fk-select>
</template>

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

export default {
  setup() {
    const value = ref('Shanghai');
    return {
      value
    }
  },
}
</script>

多选选择器 ​

通过设置 multiple ，可以让选择器支持多选。此外通过 max-tag-count 可以设置最多显示的标签个数。

代码事例
vue

<template>
  <div style="margin-bottom: 10px">
    <fk-switch v-model="scrollbar" />
    Virtual Scrollbar
  </div>
  <fk-space direction="vertical" size="large">
    <fk-select
        :default-value="['Beijing','Shanghai']" 
        :style="{width:'360px'}" 
        placeholder="Please select ..." 
        multiple
        :scrollbar="scrollbar"
        show-header-check-all
      >
      <fk-option>Beijing</fk-option>
      <fk-option :tag-props="{color:'red'}">Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
    <fk-select
:default-value="['Beijing','Shanghai','Guangzhou']" :style="{width:'360px'}"
              placeholder="Please select ..." multiple :max-tag-count="2" allow-clear :scrollbar="scrollbar">
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Chengdu</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
    <fk-select
:default-value="['Beijing','Shanghai']" :style="{width:'360px'}" placeholder="Please select ..." multiple
              :limit="2" :scrollbar="scrollbar">
      <fk-option>Beijing</fk-option>
      <fk-option :tag-props="{color:'red'}">Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
  </fk-space>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const scrollbar = ref(true);

    return {
      scrollbar
    }
  }
}
</script>

选择框大小 ​

选择框分为 mini、small、medium、large 四种尺寸。

代码事例
vue

<template>
  <fk-space direction="vertical" size="large">
    <fk-radio-group v-model="size" type="button">
      <fk-radio value="mini">Mini</fk-radio>
      <fk-radio value="small">Small</fk-radio>
      <fk-radio value="medium">Medium</fk-radio>
      <fk-radio value="large">Large</fk-radio>
    </fk-radio-group>
    <fk-select default-value="Beijing" :style="{width:'320px'}" :size="size" placeholder="Please select ...">
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
    </fk-select>
    <fk-select
:default-value="['Beijing','Shanghai']" :style="{width:'320px'}" :size="size"
              placeholder="Please select ..." multiple>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Chengdu</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
  </fk-space>
</template>

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

export default {
  setup() {
    const size = ref('medium');

    return {
      size
    }
  },
}
</script>

加载中 ​

选择框和下拉菜单显示加载中状态。

代码事例
vue
<template>
  <fk-select :style="{width:'320px'}" placeholder="Please select ..." loading>
    <fk-option>Beijing</fk-option>
    <fk-option>Shanghai</fk-option>
    <fk-option>Guangzhou</fk-option>
    <fk-option disabled>Disabled</fk-option>
  </fk-select>
</template>

下拉菜单的页头 ​

自定义下拉菜单的页头

代码事例
vue
<template>
  <fk-space>
    <fk-select :default-value="'Beijing'" :style="{width:'360px'}" placeholder="Please select ..." multiple>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Wuhan</fk-option>
      <template #header>
        <div style="padding: 6px 12px;" >
          <fk-checkbox value="1">全选</fk-checkbox>
        </div>
      </template>
    </fk-select>

    <fk-select :default-value="'Beijing'" :style="{width:'360px'}" placeholder="Please select ..." multiple show-header-on-empty>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Wuhan</fk-option>
      <template #header>
        <div style="padding: 6px 12px;" >
          <fk-checkbox value="1">全选</fk-checkbox>
        </div>
      </template>
    </fk-select>
  </fk-space>
</template>

下拉菜单的页脚 ​

自定义下拉菜单的页脚

代码事例
vue
<template>
  <fk-space>
    <fk-select :default-value="'Beijing'" :style="{width:'360px'}" placeholder="Please select ..." allow-search>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Wuhan</fk-option>
      <template #footer>
        <div style="padding: 6px 0; text-align: center;">
          <fk-button>Click Me</fk-button>
        </div>
      </template>
    </fk-select>
    <fk-select :default-value="'Beijing'" :style="{width:'360px'}" placeholder="Please select ..." allow-search show-footer-on-empty>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Wuhan</fk-option>
      <template #footer>
        <div style="padding: 6px 0; text-align: center;">
          <fk-button>Click Me</fk-button>
        </div>
      </template>
    </fk-select>
  </fk-space>
</template>

无边框模式 ​

设置 bordered="false" 开启无边框模式，常用于沉浸式使用。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-select :style="{width:'100%'}" placeholder="Please select ..." :bordered="false">
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
    </fk-select>
    <fk-select :default-value="['Beijing','Shanghai']" :style="{width:'360px'}" placeholder="Please select ..." multiple :bordered="false">
      <fk-option>Beijing</fk-option>
      <fk-option :tag-props="{color:'red'}">Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
  </fk-space>
</template>

允许创建 ​

通过设置 allow-create ，让选择器可以创建选项中不存在的条目。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    {{value}}<fk-select v-model="value" :style="{width:'320px'}" placeholder="Please select ..." allow-create>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Chengdu</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
    <fk-select :style="{width:'320px'}" placeholder="Please select ..." multiple allow-create>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Chengdu</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
  </fk-space>
</template>
<script setup>
import {ref} from 'vue';
const value = ref('');
</script>

允许搜索 ​

通过设置 allow-search ，可以让选择器支持对选项的搜索，配合 filter-option 可以自定义搜索。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-select :style="{width:'320px'}" placeholder="Please select ..." allow-search>
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Chengdu</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
    <fk-select :style="{width:'320px'}" placeholder="Please select ..." :allow-search="{ retainInputValue: true }">
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Chengdu</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
    <fk-select
:options="options" :style="{width:'320px'}" :loading="loading" placeholder="Please select ..." multiple
              @search="handleSearch" />
  </fk-space>
</template>

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

export default {
  setup() {
    const options = ref(['Option1', 'Option2', 'Option3']);
    const loading = ref(false);
    const inputValue = ref('');

    const handleSearch = (value) => {
      if (value) {
        loading.value = true;
        window.setTimeout(() => {
          options.value = [`${value}-Option1`, `${value}-Option2`, `${value}-Option3`]
          loading.value = false;
        }, 2000)
      } else {
        options.value = []
      }
    };

    return {
      options,
      loading,
      inputValue,
      handleSearch
    }
  },
}
</script>

下拉菜单滚动 ​

可以通过 dropdown-scroll 监听下拉菜单的滚动事件。或者通过 dropdown-reach-bottom 监听下拉菜单滚动到底部的事件。

代码事例
vue
<template>
  <fk-select
    :style="{width:'320px'}"
    default-value="Beijing"
    placeholder="Please select ..."
    @dropdown-scroll="handleScroll"
    @dropdown-reach-bottom="handleReachBottom"
  >
    <fk-option>Beijing</fk-option>
    <fk-option>Shanghai</fk-option>
    <fk-option>Guangzhou</fk-option>
    <fk-option disabled>Disabled</fk-option>
    <fk-option>Shenzhen</fk-option>
    <fk-option>Chengdu</fk-option>
    <fk-option>Wuhan</fk-option>
  </fk-select>
</template>

<script>
export default {
  setup() {
    const handleScroll = (ev) => {
      console.log('scroll', ev)
    }
    const handleReachBottom = (ev) => {
      console.log('reach the bottom', ev)
    }

    return {
      handleScroll,
      handleReachBottom
    }
  },
}
</script>

回退选项 ​

使用 fallback-option 自定义选项中不存在的值，默认会在输入框中展示不存在的选项值。可能用于选项还没有获取完，或者远程搜索时选项改变了。

代码事例
vue

<template>
  <fk-space direction="vertical" size="large">
    <fk-select default-value="Shanxi" :style="{width:'320px'}" placeholder="Please select ..." :fallback-option="fallback">
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
    </fk-select>
    <fk-select default-value="Shanxi" :style="{width:'320px'}" placeholder="Please select ..." :fallback-option="fallback" :show-extrfk-options="false">
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
    </fk-select>
    <fk-select :default-value="['Shanxi','Nanjing','Hangzhou']" :style="{width:'320px'}" placeholder="Please select ..." multiple :fallback-option="fallback">
      <fk-option>Beijing</fk-option>
      <fk-option>Shanghai</fk-option>
      <fk-option>Guangzhou</fk-option>
      <fk-option disabled>Disabled</fk-option>
      <fk-option>Shenzhen</fk-option>
      <fk-option>Chengdu</fk-option>
      <fk-option>Wuhan</fk-option>
    </fk-select>
  </fk-space>
</template>

<script>
export default {
  setup() {
    const fallback = (value) => {
      return {
        value,
        label: `++${value}++`
      }
    };
    return {
      fallback
    }
  },
}
</script>

远程搜索 ​

使用 search 事件进行远程搜索，并改变选项。

代码事例
vue

<template>
  <fk-space direction="vertical" size="large">
    <div>Show selections after search options</div>
    <fk-select
:style="{width:'320px'}" :loading="loading" placeholder="Please select ..." multiple
              :filter-option="false" @search="handleSearch">
      <fk-option v-for="item of options" :value="item">{{item}}</fk-option>
    </fk-select>
    <div>Hide selections after search options</div>
    <fk-select
:options="options" :style="{width:'320px'}" :loading="loading" placeholder="Please select ..." multiple
              :filter-option="false" :show-extrfk-options="false" @search="handleSearch" />
  </fk-space>
</template>

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

export default {
  setup() {
    const options = ref(['Option1', 'Option2', 'Option3']);
    const loading = ref(false);

    const handleSearch = (value) => {
      if (value) {
        loading.value = true;
        window.setTimeout(() => {
          options.value = [`${value}-Option1`, `${value}-Option2`, `${value}-Option3`]
          loading.value = false;
        }, 500)
      } else {
        options.value = []
      }
    };

    return {
      options,
      loading,
      handleSearch
    }
  },
}
</script>

分组 ​

使用 optgroup 组件添加分组选项。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-select :style="{width:'320px'}" placeholder="Please select ...">
      <fk-optgroup label="Group-1">
        <fk-option>Beijing</fk-option>
        <fk-option>Shanghai</fk-option>
      </fk-optgroup>
      <fk-optgroup label="Group-2">
        <fk-option>Guangzhou</fk-option>
        <fk-option disabled>Disabled</fk-option>
        <fk-option>Shenzhen</fk-option>
      </fk-optgroup>
      <fk-optgroup label="Group-3">
        <fk-option>Chengdu</fk-option>
        <fk-option>Wuhan</fk-option>
      </fk-optgroup>
    </fk-select>
    <fk-select :style="{width:'320px'}" placeholder="Please select ..." multiple>
      <fk-optgroup label="Group-1">
        <fk-option>Beijing</fk-option>
        <fk-option>Shanghai</fk-option>
      </fk-optgroup>
      <fk-optgroup label="Group-2">
        <fk-option>Guangzhou</fk-option>
        <fk-option disabled>Disabled</fk-option>
        <fk-option>Shenzhen</fk-option>
      </fk-optgroup>
      <fk-optgroup label="Group-3">
        <fk-option>Chengdu</fk-option>
        <fk-option>Wuhan</fk-option>
      </fk-optgroup>
    </fk-select>
  </fk-space>
</template>

自定义选择框展示内容 ​

通过 #label 插槽可以自定义选择框展示内容。

代码事例
vue
<template>
  <fk-select default-value="Beijing" :style="{width:'320px'}" placeholder="Please select ...">
    <template #label="{ data }">
      <span><icon-plus/>{{data?.label}}</span>
    </template>
    <fk-option>Beijing</fk-option>
    <fk-option>Shanghai</fk-option>
    <fk-option>Guangzhou</fk-option>
    <fk-option disabled>Disabled</fk-option>
  </fk-select>
</template>

<script>
import { IconPlus } from '@erp/common';

export default {
  components: { IconPlus }
};
</script>

联动选择框 ​

展示联动选择框的实现方法。

代码事例
vue

<template>
  <fk-space>
    <fk-select v-model="province" :style="{width:'200px'}">
      <fk-option v-for="value of Object.keys(data)">{{value}}</fk-option>
    </fk-select>
    <fk-select v-model="city" :style="{width:'200px'}" :options="data[province] || []" />
  </fk-space>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const province = ref('Sichuan');
    const city = ref('Chengdu');
    const data = {
      Beijing: ['Haidian', 'Chaoyang', 'Changping'],
      Sichuan: ['Chengdu', 'Mianyang', 'Aba'],
      Guangdong: ['Guangzhou', 'Shenzhen', 'Shantou']
    };

    watch(province, () => {
      city.value = ''
    })

    return {
      province,
      city,
      data
    }
  },
}
</script>

自定义字段名 ​

可以通过 field-names 属性自定义 options 中数据的格式。

代码事例
vue
<template>
  <fk-select
v-model="value" :options="options" :field-names="fieldNames" :style="{width:'320px'}"
            placeholder="Please select ..." />
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const value = ref('bj');
    const fieldNames = {value: 'city', label: 'text'}
    const options = reactive([
      {
        city: 'bj',
        text: 'Beijing'
      },
      {
        city: 'sh',
        text: 'Shanghai'
      },
      {
        city: 'gz',
        text: 'Guangzhou'
      },
      {
        city: 'cd',
        text: 'Chengdu'
      },
    ]);

    return {
      value,
      fieldNames,
      options
    }
  }
}
</script>

虚拟列表 ​

虚拟列表的使用方法。

代码事例
vue

<template>
  <fk-space>
    <fk-select :style="{width:'320px'}" :options="options" placeholder="Please select ..." :virtual-list-props="{height:200}" />
    <fk-select :style="{width:'320px'}" multiple :options="options" placeholder="Please select ..." :virtual-list-props="{height:200}" />
  </fk-space>
  
</template>

<script>
export default {
  setup() {
    const options = Array.from({length: 1000}).fill(null).map((_, index) => `Option ${index}`);

    return {
      options
    }
  },
}
</script>

API ​

<select> Props ​

参数名描述类型默认值版本
multiple是否开启多选模式（多选模式默认开启搜索）booleanfalse
model-value (v-model)绑定值string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]-
default-value默认值（非受控模式）string | number | boolean | Record<string, unknown> | (string | number | boolean | Record<string, unknown>)[]'' \ []
input-value (v-model)输入框的值string-
default-input-value输入框的默认值（非受控模式）string''
size选择框的大小'mini' | 'small' | 'medium' | 'large''medium'
placeholder占位符string-
loading是否为加载中状态booleanfalse
disabled是否禁用booleanfalse
error是否为错误状态booleanfalse
allow-clear是否允许清空booleanfalse
allow-search是否允许搜索boolean | { retainInputValue?: boolean }false (single) \ true (multiple)
allow-create是否允许创建booleanfalse
max-tag-count多选模式下，最多显示的标签数量。0 表示不限制number0
popup-container弹出框的挂载容器string | HTMLElement-
bordered是否显示输入框的边框booleantrue
default-active-first-option是否在无值时默认选择第一个选项booleantrue1.0.0
popup-visible (v-model)是否显示下拉菜单boolean-
default-popup-visible弹出框默认是否可见（非受控模式）booleanfalse
unmount-on-close是否在下拉菜单关闭时销毁元素booleanfalse
filter-option是否过滤选项boolean | ((inputValue: string, option: SelectOptionData) => boolean)true
options选项数据(string | number | boolean | SelectOptionData | SelectOptionGroup)[][]
virtual-list-props传递虚拟列表属性，传入此参数以开启虚拟滚动 VirtualListPropsVirtualListProps-
trigger-props下拉菜单的触发器属性TriggerProps-
format-label格式化显示内容(data: SelectOptionData) => string-
fallback-option自定义值中不存在的选项boolean | ((value: string | number | boolean | Record<string, unknown>) => SelectOptionData)true1.0.0
show-extra-options是否在下拉菜单中显示额外选项booleantrue1.0.0
value-key用于确定选项键值的属性名string'value'1.0.0
search-delay触发搜索事件的延迟时间number5001.0.0
limit多选时最多的选择个数number01.0.0
field-names自定义 SelectOptionData 中的字段SelectFieldNames-1.0.0
scrollbar是否开启虚拟滚动条boolean | ScrollbarPropstrue1.0.0
show-header-on-empty空状态时是否显示headerbooleanfalse
show-footer-on-empty空状态时是否显示footerbooleanfalse
tag-nowrap标签内容不换行booleanfalse1.0.0

<select> Events ​

事件名描述参数版本
change值发生改变时触发value: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
input-value-change输入框的值发生改变时触发inputValue: string
popup-visible-change下拉框的显示状态改变时触发visible: boolean
clear点击清除按钮时触发-
remove点击标签的删除按钮时触发removed: string | number | boolean | Record<string, any> | undefined
search用户搜索时触发inputValue: string
dropdown-scroll下拉菜单发生滚动时触发-
dropdown-reach-bottom下拉菜单滚动到底部时触发-
exceed-limit多选超出限制时触发value: string | number | boolean | Record<string, any> | undefined
ev: Event		1.0.0

<select> Slots ​

插槽名描述参数版本
trigger自定义触发元素-1.0.0
prefix前缀元素-1.0.0
search-icon选择框的搜索图标-1.0.0
loading-icon选择框的加载中图标-1.0.0
arrow-icon选择框的箭头图标-1.0.0
footer下拉框的页脚-
header下拉框的页头-1.0.0
label选择框的显示内容data: SelectOptionData
option选项内容data: SelectOptionData
empty选项为空时的显示内容-

<option> Props ​

参数名描述类型默认值版本
value选项值（如不填，会从内容中获取）string|number|boolean|object-
label选项标签（如不填，会从内容中获取）string-
disabled是否禁用booleanfalse
tag-props展示的标签属性TagProps-1.0.0
extra额外数据。2.18.0 版本废弃，可使用对象形式的 value 扩展数据object-1.0.0
index用于手动指定选项的 indexnumber-1.0.0

<optgroup> Props ​

参数名描述类型默认值
label选项组的标题string-

<optgroup> Slots ​

插槽名描述参数版本
label选项组的标题-1.0.0

Type ​

ts
/**
 * @zh 选项
 * @en Option
 */
type Option = string | number | SelectOptionData | SelectOptionGroup;

/**
 * @zh 筛选
 * @en Filter
 */
type FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);

SelectOptionData ​

参数名描述类型默认值
value选项值string | number | boolean | Record<string, unknown>-
label选项内容string-
disabled是否禁用booleanfalse
tagProps选项对应的多选标签的属性any-
render自定义渲染RenderFunction-

SelectOptionGroup ​

参数名描述类型默认值
isGroup是否为选项组true-
label选项组标题string-
options选项组中的选项SelectOption[]-

VirtualListProps ​

参数名描述类型默认值版本
height可视区域高度number | string-
threshold开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。number-
isStaticItemHeight元素高度是否是固定的。booleanfalse
fixedSize元素高度是否是固定的。booleanfalse1.0.0
estimatedSize元素高度不固定时的预估高度。number-1.0.0
buffer视口边界外提前挂载的元素数量。number101.0.0

FAQ ​

使用 Object 格式作为选项的值 ​

当使用 Object 格式作为选项的值时，需要通过 value-key 属性为选择器指定获取唯一标识的字段名，默认值为 value. 此外 value 的对象值需要在 setup 中定义好，不能够在模版中创建对象，这样会导致 Option 组件的重复渲染。

例如当我需要指定 key 为唯一标识时：

vue
<template>
  <fk-select v-model="value" :style="{width:'320px'}" placeholder="Please select ..." value-key="key">
    <fk-option v-for="item of data" :value="item" :label="item.label" />
  </fk-select>
</template>

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

export default {
  setup() {
    const value = ref();
    const data = [{
      value: 'beijing',
      label: 'Beijing',
      key: 'extra1'
    }, {
      value: 'shanghai',
      label: 'Shanghai',
      key: 'extra2'
    }, {
      value: 'guangzhou',
      label: 'Guangzhou',
      key: 'extra3'
    }, {
      value: 'chengdu',
      label: 'Chengdu',
      key: 'extra4'
    }]

    return {
      value,
      data
    }
  },
}
</script>

滚动容器中的下拉菜单分离问题 ​

Select 组件默认没有开启容器滚动的事件监听功能，如果遇到在滚动容器中下拉菜单分离的问题，可以手动开启内部 Trigger 组件的 updateAtScroll 功能。 如果是在全局环境中存在此种情况，可以使用 ConfigProvider 组件默认开启此属性。

vue
<fk-select :trigger-props="{updateAtScroll:true}"></fk-select>

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team