Unverified 提交 a03d3cc6 作者: M69W 提交者: GitHub

fix(ApiSelect demo): add demo about ApiSelect's use (#757)

* fix(ApiSelect demo): add demo about ApiSelect's use

* fix(ApiSelect demo): typo

* revert(ApiSelect): remove console

Co-authored-by: M69W <M69W@M69W>
上级 bbce002b
import { MockMethod } from 'vite-plugin-mock'; import { MockMethod } from 'vite-plugin-mock';
import { resultSuccess } from '../_util'; import { resultSuccess } from '../_util';
const list: any[] = [];
const demoList = (() => { const demoList = (() => {
const result: any[] = []; const result = {
list: list,
};
for (let index = 0; index < 20; index++) { for (let index = 0; index < 20; index++) {
result.push({ result.list.push({
label: `选项${index}`, name: `选项${index}`,
value: `${index}`, id: `${index}`,
}); });
} }
return result; return result;
...@@ -15,8 +18,8 @@ const demoList = (() => { ...@@ -15,8 +18,8 @@ const demoList = (() => {
export default [ export default [
{ {
url: '/basic-api/select/getDemoOptions', url: '/basic-api/select/getDemoOptions',
timeout: 2000, timeout: 1000,
method: 'get', method: 'post',
response: ({ query }) => { response: ({ query }) => {
console.log(query); console.log(query);
return resultSuccess(demoList); return resultSuccess(demoList);
......
...@@ -5,6 +5,10 @@ export interface DemoOptionsItem { ...@@ -5,6 +5,10 @@ export interface DemoOptionsItem {
value: string; value: string;
} }
export interface selectParams {
id: number | string;
}
/** /**
* @description: Request list return value * @description: Request list return value
*/ */
......
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { DemoOptionsItem } from './model/optionsModel'; import { DemoOptionsItem, selectParams } from './model/optionsModel';
enum Api { enum Api {
OPTIONS_LIST = '/select/getDemoOptions', OPTIONS_LIST = '/select/getDemoOptions',
} }
...@@ -7,4 +7,5 @@ enum Api { ...@@ -7,4 +7,5 @@ enum Api {
/** /**
* @description: Get sample options value * @description: Get sample options value
*/ */
export const optionsListApi = () => defHttp.get<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST }); export const optionsListApi = (params?: selectParams) =>
defHttp.post<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params });
...@@ -272,11 +272,39 @@ ...@@ -272,11 +272,39 @@
label: '远程下拉', label: '远程下拉',
required: true, required: true,
componentProps: { componentProps: {
// more details see /src/components/Form/src/components/ApiSelect.vue
api: optionsListApi, api: optionsListApi,
params: {
id: 1,
},
// use [res.data.result.list] (no res.data.result) as options datas
// result: {
// list: [
// {
// name: "选项0",
// id: "0"
// },
// ]
// }
resultField: 'list',
// use name as label
labelField: 'name',
// use id as value
valueField: 'id',
// not request untill to select
immediate: false,
onChange: (e) => {
console.log('selected:', e);
},
// atfer request callback
onOptionsChange: (options) => {
console.log('get options', options.length, options);
},
}, },
colProps: { colProps: {
span: 8, span: 8,
}, },
// set default value
defaultValue: '0', defaultValue: '0',
}, },
{ {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论