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

View File

@@ -1,5 +1,5 @@
<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)">
<slot :name="item" v-bind="data || {}"></slot>
</template>
@@ -11,7 +11,16 @@
<script lang="ts">
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 { isArray, isFunction } from '/@/utils/is';
import { get } from 'lodash-es';
@@ -26,6 +35,9 @@
params: { type: Object },
immediate: { type: Boolean, default: true },
resultField: propTypes.string.def(''),
labelField: propTypes.string.def('title'),
valueField: propTypes.string.def('value'),
childrenField: propTypes.string.def('children'),
},
emits: ['options-change', 'change'],
setup(props, { attrs, emit }) {
@@ -38,11 +50,20 @@
...attrs,
};
});
const fieldNames = {
children: props.childrenField,
value: props.valueField,
label: props.labelField,
};
function handleChange(...args) {
emit('change', ...args);
}
watchEffect(() => {
props.immediate && fetch();
});
watch(
() => props.params,
() => {
@@ -82,7 +103,7 @@
isFirstLoaded.value = true;
emit('options-change', treeData.value);
}
return { getAttrs, loading, handleChange };
return { getAttrs, loading, handleChange, fieldNames };
},
});
</script>