feat: ✨ search配置新增函数能力拓展
search表单,部分情况下需要函数扩展数据处理能力。如options为异步获取的情况
This commit is contained in:
@@ -69,7 +69,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { reactive, ref } from "vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
|
||||
// 对象类型
|
||||
type IObject = Record<string, any>;
|
||||
@@ -91,6 +91,8 @@ export interface ISearchConfig {
|
||||
initialValue?: any;
|
||||
// 可选项(适用于select组件)
|
||||
options?: { label: string; value: any }[];
|
||||
// 初始化数据函数扩展(适用初始化options)
|
||||
initFn?: Function;
|
||||
}>;
|
||||
// 是否开启展开和收缩
|
||||
isExpandable?: boolean;
|
||||
@@ -146,6 +148,12 @@ function toggleVisible() {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
props.searchConfig.formItems.forEach((item) => {
|
||||
item.initFn && item.initFn();
|
||||
});
|
||||
});
|
||||
|
||||
// 暴露的属性和方法
|
||||
defineExpose({ getQueryParams, toggleVisible });
|
||||
</script>
|
||||
|
||||
@@ -57,10 +57,15 @@ const searchConfig: ISearchConfig = {
|
||||
width: "100px",
|
||||
},
|
||||
},
|
||||
options: [
|
||||
{ label: "启用", value: 1 },
|
||||
{ label: "禁用", value: 0 },
|
||||
],
|
||||
options: [],
|
||||
initFn() {
|
||||
setTimeout(() => {
|
||||
this.options = [
|
||||
{ label: "启用", value: 1 },
|
||||
{ label: "禁用", value: 0 },
|
||||
];
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "date-picker",
|
||||
|
||||
Reference in New Issue
Block a user