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:
parent
df1fceb291
commit
573d395b69
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue