异步选择 Async Select

演示

基础用法

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

基础表格

value:

<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:

<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

<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:是否多选

Name	Type	Default	Description
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	是否多选