feat(tree): add expose some state, close #4820

This commit is contained in:
tangjinzhou 2021-10-29 16:47:25 +08:00
parent c16a5d46ae
commit fbd9a21dc8
3 changed files with 23 additions and 3 deletions

View File

@ -55,11 +55,12 @@ export default defineComponent({
'dblclick', 'dblclick',
'click', 'click',
], ],
setup(props, { attrs, slots, emit }) { setup(props, { attrs, slots, emit, expose }) {
// convertTreeToData a-tree-node a-tree-noderender treeData // convertTreeToData a-tree-node a-tree-noderender treeData
const treeData = ref<DataNode[]>( const treeData = ref<DataNode[]>(
props.treeData || convertTreeToData(filterEmpty(slots.default?.())), props.treeData || convertTreeToData(filterEmpty(slots.default?.())),
); );
watch( watch(
() => props.treeData, () => props.treeData,
() => { () => {
@ -79,7 +80,14 @@ export default defineComponent({
const cachedSelectedKeys = ref<Key[]>(); const cachedSelectedKeys = ref<Key[]>();
const treeRef = ref(); const treeRef = ref();
expose({
selectedKeys: computed(() => treeRef.value?.selectedKeys),
checkedKeys: computed(() => treeRef.value?.checkedKeys),
halfCheckedKeys: computed(() => treeRef.value?.halfCheckedKeys),
loadedKeys: computed(() => treeRef.value?.loadedKeys),
loadingKeys: computed(() => treeRef.value?.loadingKeys),
expandedKeys: computed(() => treeRef.value?.expandedKeys),
});
const getInitExpandedKeys = () => { const getInitExpandedKeys = () => {
const { keyEntities } = convertDataToEntities(treeData.value); const { keyEntities } = convertDataToEntities(treeData.value);

View File

@ -1,5 +1,5 @@
import type { PropType, ExtractPropTypes } from 'vue'; import type { PropType, ExtractPropTypes } from 'vue';
import { watchEffect, ref, defineComponent } from 'vue'; import { watchEffect, ref, defineComponent, computed } from 'vue';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import VcTree, { TreeNode } from '../vc-tree'; import VcTree, { TreeNode } from '../vc-tree';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
@ -164,6 +164,12 @@ export default defineComponent({
onNodeExpand: (...args) => { onNodeExpand: (...args) => {
treeRef.value?.onNodeExpand(...args); treeRef.value?.onNodeExpand(...args);
}, },
selectedKeys: computed(() => treeRef.value?.selectedKeys),
checkedKeys: computed(() => treeRef.value?.checkedKeys),
halfCheckedKeys: computed(() => treeRef.value?.halfCheckedKeys),
loadedKeys: computed(() => treeRef.value?.loadedKeys),
loadingKeys: computed(() => treeRef.value?.loadingKeys),
expandedKeys: computed(() => treeRef.value?.expandedKeys),
}); });
watchEffect(() => { watchEffect(() => {

View File

@ -952,6 +952,12 @@ export default defineComponent({
onNodeExpand, onNodeExpand,
scrollTo, scrollTo,
onKeydown, onKeydown,
selectedKeys: computed(() => selectedKeys.value),
checkedKeys: computed(() => checkedKeys.value),
halfCheckedKeys: computed(() => halfCheckedKeys.value),
loadedKeys: computed(() => loadedKeys.value),
loadingKeys: computed(() => loadingKeys.value),
expandedKeys: computed(() => expandedKeys.value),
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('dragend', onWindowDragEnd); window.removeEventListener('dragend', onWindowDragEnd);