Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
13d660be
提交
13d660be
authored
12月 10, 2021
作者:
zuihou
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 添加BasicTree使用 fieldNames 后,actionList 和 插槽 会失效的示例代码
上级
8523afd5
隐藏空白字符变更
内嵌
并排
正在显示
2 个修改的文件
包含
140 行增加
和
30 行删除
+140
-30
EditTree.vue
src/views/demo/tree/EditTree.vue
+54
-30
data.ts
src/views/demo/tree/data.ts
+86
-0
没有找到文件。
src/views/demo/tree/EditTree.vue
浏览文件 @
13d660be
<
template
>
<PageWrapper
title=
"Tree函数操作示例"
>
<div
class=
"flex"
>
<BasicTree
class=
"w-1/3"
title=
"右侧操作按钮/自定义图标"
helpMessage=
"帮助信息"
:treeData=
"treeData"
:actionList=
"actionList"
:renderIcon=
"createIcon"
/>
<BasicTree
class=
"w-1/3 mx-4"
title=
"右键菜单"
:treeData=
"treeData"
:beforeRightClick=
"getRightMenuList"
/>
<BasicTree
class=
"w-1/3"
title=
"工具栏使用"
toolbar
checkable
search
:treeData=
"treeData"
:beforeRightClick=
"getRightMenuList"
/>
</div>
<Row
:gutter=
"[16, 16]"
>
<Col
:span=
"8"
>
<BasicTree
title=
"右侧操作按钮/自定义图标"
helpMessage=
"帮助信息"
:treeData=
"treeData"
:actionList=
"actionList"
:renderIcon=
"createIcon"
/>
</Col>
<Col
:span=
"8"
>
<BasicTree
title=
"右键菜单"
:treeData=
"treeData"
:beforeRightClick=
"getRightMenuList"
/>
</Col>
<Col
:span=
"8"
>
<BasicTree
title=
"工具栏使用"
toolbar
checkable
search
:treeData=
"treeData"
:beforeRightClick=
"getRightMenuList"
/>
</Col>
<Col
:span=
"8"
>
<BasicTree
title=
"没有fieldNames,插槽有效"
helpMessage=
"正确的示例"
:treeData=
"treeData3"
>
<template
#
title=
"item"
>
插槽:
{{
item
.
name
}}
</
template
>
</BasicTree>
</Col>
<Col
:span=
"8"
>
<BasicTree
title=
"有fieldNames后,插槽失效"
helpMessage=
"错误的示例, 应该显示插槽的内容才对"
:fieldNames=
"{ key: 'id', title: 'name' }"
:treeData=
"treeData2"
>
<
template
#
title=
"item"
>
插槽:
{{
item
.
title
}}
</
template
>
</BasicTree>
</Col>
<Col
:span=
"8"
>
<BasicTree
title=
"有fieldNames后,actionList失效"
helpMessage=
"错误的示例,应该在鼠标移上去时,显示新增和删除按钮才对"
:treeData=
"treeData3"
:actionList=
"actionList"
:fieldNames=
"{ key: 'key', title: 'name' }"
/>
</Col>
</Row>
</PageWrapper>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
,
h
}
from
'vue'
;
import
{
BasicTree
,
ActionItem
,
ContextMenuItem
}
from
'/@/components/Tree/index'
;
import
{
treeData
}
from
'./data'
;
import
{
Row
,
Col
}
from
'ant-design-vue'
;
import
{
BasicTree
,
TreeActionItem
,
ContextMenuItem
}
from
'/@/components/Tree/index'
;
import
{
treeData
,
treeData2
,
treeData3
}
from
'./data'
;
import
{
PlusOutlined
,
DeleteOutlined
}
from
'@ant-design/icons-vue'
;
import
{
PageWrapper
}
from
'/@/components/Page'
;
export
default
defineComponent
({
components
:
{
BasicTree
,
PageWrapper
},
components
:
{
BasicTree
,
PageWrapper
,
Row
,
Col
},
setup
()
{
function
handlePlus
(
node
:
any
)
{
console
.
log
(
node
);
...
...
@@ -59,7 +83,7 @@
},
];
}
const
actionList
:
ActionItem
[]
=
[
const
actionList
:
Tree
ActionItem
[]
=
[
{
// show:()=>boolean;
render
:
(
node
)
=>
{
...
...
@@ -90,7 +114,7 @@
}
return
''
;
}
return
{
treeData
,
actionList
,
getRightMenuList
,
createIcon
};
return
{
treeData
,
treeData2
,
treeData3
,
actionList
,
getRightMenuList
,
createIcon
};
},
});
</
script
>
src/views/demo/tree/data.ts
浏览文件 @
13d660be
...
...
@@ -33,3 +33,89 @@ export const treeData: TreeItem[] = [
],
},
];
export
const
treeData2
:
any
[]
=
[
{
name
:
'parent '
,
id
:
'0-0'
,
slots
:
{
title
:
'title'
},
children
:
[
{
name
:
'leaf'
,
id
:
'0-0-0'
,
slots
:
{
title
:
'title'
}
},
{
name
:
'leaf'
,
id
:
'0-0-1'
,
slots
:
{
title
:
'title'
},
children
:
[
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
id
:
'0-0-0-0'
,
children
:
[{
name
:
'leaf'
,
id
:
'0-0-0-0-1'
,
slots
:
{
title
:
'title'
}
}],
},
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
id
:
'0-0-0-1'
},
],
},
],
},
{
name
:
'parent 2'
,
id
:
'1-1'
,
slots
:
{
title
:
'title'
},
children
:
[
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
id
:
'1-1-0'
},
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
id
:
'1-1-1'
},
],
},
{
name
:
'parent 3'
,
id
:
'2-2'
,
slots
:
{
title
:
'title'
},
children
:
[
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
id
:
'2-2-0'
},
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
id
:
'2-2-1'
},
],
},
];
export
const
treeData3
:
any
[]
=
[
{
name
:
'parent '
,
key
:
'0-0'
,
slots
:
{
title
:
'title'
},
children
:
[
{
name
:
'leaf'
,
key
:
'0-0-0'
,
slots
:
{
title
:
'title'
}
},
{
name
:
'leaf'
,
key
:
'0-0-1'
,
slots
:
{
title
:
'title'
},
children
:
[
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
key
:
'0-0-0-0'
,
children
:
[{
name
:
'leaf'
,
key
:
'0-0-0-0-1'
,
slots
:
{
title
:
'title'
}
}],
},
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
key
:
'0-0-0-1'
},
],
},
],
},
{
name
:
'parent 2'
,
key
:
'1-1'
,
slots
:
{
title
:
'title'
},
children
:
[
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
key
:
'1-1-0'
},
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
key
:
'1-1-1'
},
],
},
{
name
:
'parent 3'
,
key
:
'2-2'
,
slots
:
{
title
:
'title'
},
children
:
[
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
key
:
'2-2-0'
},
{
name
:
'leaf'
,
slots
:
{
title
:
'title'
},
key
:
'2-2-1'
},
],
},
];
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论