AsyncSelect异步加载下拉组件

# 引入组件

import { App } from "vue";
import AsyncSelect from "./AsyncSelect.vue";

export function setupRegisterGlobComp(app: App) {
  app.component("AsyncSelect", AsyncSelect);
}

1
2
3
4
5
6

# 参数配置

额外参数	类型	必填	说明
url	string	必填	数据查询url
modelValue（v-model）	string	非必填	下拉值

扩展自el-select，其余参数可参照 element-plus (opens new window) 官方示例，

接口返回参数格式需按照指定类型返回，也可自行根据项目需求调整

type OptionsType = {
  label: string;
  value: string;
};

1
2
3
4

# 代码示例

<script setup lang="ts">
const url = "/article/type";
const value = ref("");
</script>

<template>
  <AsyncSelect v-model="value" :url="url" size="default" style="width: 200px" />
</template>

<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11

编辑

#开源项目

上次更新: 2022/08/30, 09:52:41

← cloud-app-admin Card卡片组件→