77 lines
2.2 KiB
Plaintext
77 lines
2.2 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<a-card :bordered="false" title="选择器">
|
||
扩展选择器组件，用于各种表单选择器，简化使用，内置缓存，可对相同的数据减少http请求，也可手动刷新数据源
|
||
</a-card>
|
||
</div>
|
||
<a-card :bordered="false" class="mt-4 proCard">
|
||
<a-alert message="基础使用" type="info">
|
||
<template #description>自动加载数据，首次加载缓存，之后同一个KEY不在获取新数据</template>
|
||
</a-alert>
|
||
<div class="mt-4">
|
||
<a-space align="center">
|
||
<BasicSelect
|
||
ref="basicSelectRef"
|
||
v-model:value="selectValue"
|
||
:request="loadSelectData"
|
||
@update:value="handleUpdateValue"
|
||
cache
|
||
cacheKey="SELECT_CLASSIFY"
|
||
/>
|
||
<a-button @click="setSelectData">设置选中值</a-button>
|
||
<a-button @click="getSelectValue">获取选中值</a-button>
|
||
<a-button @click="getSelectData">获取数据源</a-button>
|
||
<a-button @click="refreshSelectData">刷新数据</a-button>
|
||
</a-space>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
import { getClassifyList } from '@/api/select/select';
|
||
import { BasicSelect } from '@/components/Select';
|
||
import { message } from 'ant-design-vue';
|
||
|
||
const selectValue = ref('hot');
|
||
const basicSelectRef = ref();
|
||
const params = {
|
||
type: 1,
|
||
};
|
||
|
||
async function loadSelectData(res) {
|
||
//这里可以进行数据转换处理
|
||
return (await getClassifyList({ ...res, ...params })).map((item, index) => {
|
||
return {
|
||
...item,
|
||
index,
|
||
};
|
||
});
|
||
}
|
||
|
||
function handleUpdateValue(value, option) {
|
||
message.info('value: ' + JSON.stringify(value));
|
||
message.info('option: ' + JSON.stringify(option));
|
||
}
|
||
|
||
function refreshSelectData() {
|
||
basicSelectRef?.value.fetch();
|
||
}
|
||
|
||
function setSelectData() {
|
||
selectValue.value = 'new';
|
||
}
|
||
|
||
function getSelectValue() {
|
||
message.info('value: ' + JSON.stringify(selectValue.value));
|
||
}
|
||
|
||
function getSelectData() {
|
||
message.info('Data: ' + JSON.stringify(basicSelectRef?.value.getData()));
|
||
}
|
||
</script>
|
||
|
||
<style lang="less"></style>
|