Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
najiu-admin-template
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
najiu-frontend
najiu-admin-template
Commits
54212112
Commit
54212112
authored
Jul 06, 2021
by
无木
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat(demo): add basicTree with async data expand all
演示basicTree使用异步数据并自动展开
parent
cf840e3e
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
77 additions
and
39 deletions
+77
-39
index.vue
src/views/demo/tree/index.vue
+77
-39
No files found.
src/views/demo/tree/index.vue
View file @
54212112
<
template
>
<PageWrapper
title=
"Tree基础示例"
>
<div
class=
"flex"
>
<BasicTree
:treeData=
"treeData"
title=
"基础示例,默认展开第一层"
defaultExpandLevel=
"1"
class=
"w-1/3"
/>
<BasicTree
:treeData=
"treeData"
title=
"可勾选,默认全部展开"
:checkable=
"true"
class=
"w-1/3 mx-4"
defaultExpandAll
@
check=
"handleCheck"
/>
<BasicTree
title=
"指定默认展开/勾选示例"
:treeData=
"treeData"
:checkable=
"true"
:expandedKeys=
"['0-0']"
:checkedKeys=
"['0-0']"
class=
"w-1/3"
/>
</div>
<div
class=
"flex"
>
<BasicTree
title=
"异步树"
ref=
"asyncTreeRef"
:treeData=
"tree"
class=
"w-1/3"
:load-data=
"onLoadData"
/>
</div>
<Row
:gutter=
"[16, 16]"
>
<Col
:span=
"8"
>
<BasicTree
title=
"基础示例,默认展开第一层"
:treeData=
"treeData"
defaultExpandLevel=
"1"
/>
</Col>
<Col
:span=
"8"
>
<BasicTree
title=
"可勾选,默认全部展开"
:treeData=
"treeData"
:checkable=
"true"
defaultExpandAll
@
check=
"handleCheck"
/>
</Col>
<Col
:span=
"8"
>
<BasicTree
title=
"指定默认展开/勾选示例"
:treeData=
"treeData"
:checkable=
"true"
:expandedKeys=
"['0-0']"
:checkedKeys=
"['0-0']"
/>
</Col>
<Col
:span=
"8"
>
<BasicTree
title=
"懒加载异步树"
ref=
"asyncTreeRef"
:treeData=
"tree"
:load-data=
"onLoadData"
/>
</Col>
<Col
:span=
"16"
>
<Card
title=
"异步数据,默认展开"
>
<template
#extra
>
<a-button
@
click=
"loadTreeData"
:loading=
"treeLoading"
>
加载数据
</a-button>
</
template
>
<Spin
:spinning=
"treeLoading"
>
<BasicTree
ref=
"asyncExpandTreeRef"
:treeData=
"tree2"
/>
</Spin>
</Card>
</Col>
</Row>
</PageWrapper>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
,
ref
,
unref
}
from
'
vue
'
;
import
{
BasicTree
,
TreeActionType
}
from
'
/@/components/Tree/index
'
;
import
{
defineComponent
,
nextTick
,
ref
,
unref
}
from
'
vue
'
;
import
{
BasicTree
,
TreeActionType
,
TreeItem
}
from
'
/@/components/Tree/index
'
;
import
{
treeData
}
from
'
./data
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
import
{
Card
,
Row
,
Col
,
Spin
}
from
'
ant-design-vue
'
;
import
{
cloneDeep
}
from
'
lodash-es
'
;
export
default
defineComponent
({
components
:
{
BasicTree
,
PageWrapper
},
components
:
{
BasicTree
,
PageWrapper
,
Card
,
Row
,
Col
,
Spin
},
setup
()
{
const
asyncTreeRef
=
ref
<
Nullable
<
TreeActionType
>>
(
null
);
const
asyncExpandTreeRef
=
ref
<
Nullable
<
TreeActionType
>>
(
null
);
const
tree2
=
ref
<
TreeItem
[]
>
([]);
const
treeLoading
=
ref
(
false
);
function
handleCheck
(
checkedKeys
,
e
)
{
console
.
log
(
'
onChecked
'
,
checkedKeys
,
e
);
}
function
loadTreeData
()
{
treeLoading
.
value
=
true
;
// 以下是模拟异步获取数据
setTimeout
(()
=>
{
// 设置数据源
tree2
.
value
=
cloneDeep
(
treeData
);
treeLoading
.
value
=
false
;
// 展开全部
nextTick
(()
=>
{
console
.
log
(
unref
(
asyncExpandTreeRef
));
unref
(
asyncExpandTreeRef
)?.
expandAll
(
true
);
});
},
2000
);
}
const
tree
=
ref
([
{
title
:
'
parent
'
,
...
...
@@ -82,7 +110,17 @@
},
1000
);
});
}
return
{
treeData
,
handleCheck
,
tree
,
onLoadData
,
asyncTreeRef
};
return
{
treeData
,
handleCheck
,
tree
,
onLoadData
,
asyncTreeRef
,
asyncExpandTreeRef
,
tree2
,
loadTreeData
,
treeLoading
,
};
},
});
</
script
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment