|
@@ -26,10 +26,13 @@
|
|
|
class="w-1/3"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <div class="flex">
|
|
|
+ <BasicTree title="异步树" :treeData="tree" class="w-1/3" :load-data="onLoadData" />
|
|
|
+ </div>
|
|
|
</PageWrapper>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- import { defineComponent } from 'vue';
|
|
|
+ import { defineComponent, ref } from 'vue';
|
|
|
import { BasicTree } from '/@/components/Tree/index';
|
|
|
import { treeData } from './data';
|
|
|
import { PageWrapper } from '/@/components/Page';
|
|
@@ -40,7 +43,34 @@
|
|
|
function handleCheck(checkedKeys, e) {
|
|
|
console.log('onChecked', checkedKeys, e);
|
|
|
}
|
|
|
- return { treeData, handleCheck };
|
|
|
+ const tree = ref([
|
|
|
+ {
|
|
|
+ title: 'parent ',
|
|
|
+ key: '0-0',
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+
|
|
|
+ function onLoadData(treeNode) {
|
|
|
+ return new Promise((resolve: (value?: unknown) => void) => {
|
|
|
+ if (!treeNode.children) {
|
|
|
+ resolve();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ tree.value.forEach((v) => {
|
|
|
+ if (v.key === treeNode.eventKey) {
|
|
|
+ v.children = [
|
|
|
+ { title: 'Child Node', key: `${treeNode.eventKey}-0` },
|
|
|
+ { title: 'Child Node', key: `${treeNode.eventKey}-1` },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ resolve();
|
|
|
+ return;
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return { treeData, handleCheck, tree, onLoadData };
|
|
|
},
|
|
|
});
|
|
|
</script>
|