fix: 解决ApiTreeSelect的params更新后fetch不执行 (#2954)

* fix: 解决ApiTreeSelect的params更新后fetch不执行

* feat: 优化ApiTreeSelect参数,可自定义value等

---------

Co-authored-by: Billy Shen <shenfangtao@imaodu.com>
This commit is contained in:
billyshen26 2023-08-11 08:39:13 +08:00 committed by GitHub
parent df1fceb291
commit 573d395b69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 3 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<a-tree-select v-bind="getAttrs" @change="handleChange"> <a-tree-select v-bind="getAttrs" @change="handleChange" :field-names="fieldNames">
<template #[item]="data" v-for="item in Object.keys($slots)"> <template #[item]="data" v-for="item in Object.keys($slots)">
<slot :name="item" v-bind="data || {}"></slot> <slot :name="item" v-bind="data || {}"></slot>
</template> </template>
@ -11,7 +11,16 @@
<script lang="ts"> <script lang="ts">
import { type Recordable } from '@vben/types'; import { type Recordable } from '@vben/types';
import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue'; import {
type PropType,
computed,
defineComponent,
watchEffect,
watch,
ref,
onMounted,
unref,
} from 'vue';
import { TreeSelect } from 'ant-design-vue'; import { TreeSelect } from 'ant-design-vue';
import { isArray, isFunction } from '/@/utils/is'; import { isArray, isFunction } from '/@/utils/is';
import { get } from 'lodash-es'; import { get } from 'lodash-es';
@ -26,6 +35,9 @@
params: { type: Object }, params: { type: Object },
immediate: { type: Boolean, default: true }, immediate: { type: Boolean, default: true },
resultField: propTypes.string.def(''), resultField: propTypes.string.def(''),
labelField: propTypes.string.def('title'),
valueField: propTypes.string.def('value'),
childrenField: propTypes.string.def('children'),
}, },
emits: ['options-change', 'change'], emits: ['options-change', 'change'],
setup(props, { attrs, emit }) { setup(props, { attrs, emit }) {
@ -38,11 +50,20 @@
...attrs, ...attrs,
}; };
}); });
const fieldNames = {
children: props.childrenField,
value: props.valueField,
label: props.labelField,
};
function handleChange(...args) { function handleChange(...args) {
emit('change', ...args); emit('change', ...args);
} }
watchEffect(() => {
props.immediate && fetch();
});
watch( watch(
() => props.params, () => props.params,
() => { () => {
@ -82,7 +103,7 @@
isFirstLoaded.value = true; isFirstLoaded.value = true;
emit('options-change', treeData.value); emit('options-change', treeData.value);
} }
return { getAttrs, loading, handleChange }; return { getAttrs, loading, handleChange, fieldNames };
}, },
}); });
</script> </script>