Skip to content
Naive Potato UI
Main Navigation指南组件

Appearance

Sidebar Navigation

组件

Curd Table Curd表格

Async Select 异步选择

Custom Upload 自定义上传

页面导航
Table of Contents for current page

异步选择 Async Select ​

演示 ​

基础用法 ​

query方法可以复用CurdTable中的query方法,将分页表格接口转换为异步选择接口

基础表格

value:

vue
<template>
  <div class="flex flex-col gap-2">
    <p>value: {{ value }}</p>
    <np-async-select v-model:value="value" :query="query"> </np-async-select>
  </div>
</template>

<script setup lang="ts">
import { NpAsyncSelect } from '@naive-potato-ui/ui';
import { ref } from 'vue';

const value = ref('');

function getMockLabels(index: number) {
  const labels = [];
  for (let i = 0; i < 20; i++) {
    const labelIndex = index * 20 + i;
    labels.push({
      label: `label-${labelIndex}`,
      value: `value-${labelIndex}`,
    });
  }
  return labels;
}

async function query(options: Record<string, any>): Promise<any> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const labels = getMockLabels(options.page - 1 || 0);
      const filterLabels = options.name
        ? labels.filter((item) => item.label.includes(options.name))
        : labels;

      resolve({
        items: filterLabels,
        count: 100,
      });
    }, 1000);
  });
}
</script>

<style scoped></style>

自定义返回值类型 ​

如果返回值的key和value不是label和value,可以通过labelField和valueField来指定

基础表格

value:

vue
<template>
  <div class="flex flex-col gap-2">
    <p>value: {{ value }}</p>
    <np-async-select
      v-model:value="value"
      :query="query"
      label-field="name"
      value-field="number"
    >
    </np-async-select>
  </div>
</template>

<script setup lang="ts">
import { NpAsyncSelect } from '@naive-potato-ui/ui';
import { ref } from 'vue';

const value = ref('');

function getMockLabels(index: number) {
  const labels = [];
  for (let i = 0; i < 20; i++) {
    const labelIndex = index * 20 + i;
    labels.push({
      name: `name-${labelIndex}`,
      number: `number-${labelIndex}`,
    });
  }
  return labels;
}

async function query(options: Record<string, any>): Promise<any> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const labels = getMockLabels(options.page - 1 || 0);
      const filterLabels = options.name
        ? labels.filter((item) => item.name.includes(options.name))
        : labels;

      resolve({
        items: filterLabels,
        count: 100,
      });
    }, 1000);
  });
}
</script>

<style scoped></style>

多选 ​

通过multiple属性来指定是否多选

基础表格

value: [ "value-0", "value-1", "value-2" ]

value-0
value-1
value-2
vue
<template>
  <div class="flex flex-col gap-2">
    <p>value: {{ value }}</p>
    <np-async-select v-model:value="value" :query="query" multiple>
    </np-async-select>
  </div>
</template>

<script setup lang="ts">
import { NpAsyncSelect } from '@naive-potato-ui/ui';
import { ref } from 'vue';

const value = ref(['value-0', 'value-1', 'value-2']);

function getMockLabels(index: number) {
  const labels = [];
  for (let i = 0; i < 20; i++) {
    const labelIndex = index * 20 + i;
    labels.push({
      label: `label-${labelIndex}`,
      value: `value-${labelIndex}`,
    });
  }
  return labels;
}

async function query(options: Record<string, any>): Promise<any> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const labels = getMockLabels(options.page - 1 || 0);
      const filterLabels = options.name
        ? labels.filter((item) => item.label.includes(options.name))
        : labels;

      resolve({
        items: filterLabels,
        count: 100,
      });
    }, 1000);
  });
}
</script>

<style scoped></style>

API ​

Props ​

  • *query(options: Record<string, any>) => Promisecount:number,items:{[labelField]:string,[valueField]:any}[]:查询方法,接受参数对象,返回查询后的标签组。返回结果需包含条目数量count和条目数组items。
  • valuestring | string[]:当前选中的值
  • labelFieldstring:返回条目标签字段名
  • valueFieldstring:返回条目值字段名
  • queryFieldstring:输入查询字段名
  • placeholderstring:输入框占位符
  • disabledboolean:是否禁用
  • multipleboolean:是否多选
NameTypeDefaultDescription
query必须
(options: Record<string, any>) => Promise<count:number,items:{[labelField]:string,[valueField]:any}[]>
-

查询方法,接受参数对象,返回查询后的标签组。返回结果需包含条目数量count和条目数组items。

value
string | string[]
-

当前选中的值

labelField
string
'label'

返回条目标签字段名

valueField
string
'value'

返回条目值字段名

queryField
string
'name'

输入查询字段名

placeholder
string
'请选择'

输入框占位符

disabled
boolean
false

是否禁用

multiple
boolean
false

是否多选

Previous pageCurd Table Curd表格
Next pageCustom Upload 自定义上传