提交 72b42d7b 作者: Vben

feat(tree): add renderIcon props close #309

上级 d67bd496
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
- 新增修改密码界面 - 新增修改密码界面
- 新增部门管理示例界面 - 新增部门管理示例界面
- 新增 WebSocket 示例和服务脚本 - 新增 WebSocket 示例和服务脚本
- BasicTree 组件新增 `renderIcon` 属性用于控制层级图标显示
### ⚡ Performance Improvements ### ⚡ Performance Improvements
......
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import BasicTree from './src/index.vue';
export const BasicTree = createAsyncComponent(() => import('./src/BasicTree'));
export { BasicTree };
export type { ContextMenuItem } from '/@/hooks/web/useContextMenu'; export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
export * from './src/types'; export * from './src/types';
import type { VNode, FunctionalComponent } from 'vue';
import { h } from 'vue';
import { isString } from '/@/utils/is';
import { Icon } from '/@/components/Icon';
export interface ComponentProps {
icon: VNode | string;
}
export const TreeIcon: FunctionalComponent = ({ icon }: ComponentProps) => {
if (!icon) return null;
if (isString(icon)) {
return h(Icon, { icon, class: 'mr-1' });
}
return Icon;
};
.basic-tree {
position: relative;
&-title {
position: relative;
display: inline-block;
width: 100%;
padding-right: 10px;
&:hover {
.basic-tree__action {
visibility: visible;
}
}
}
&__content {
display: inline-block;
overflow: hidden;
}
&__actions {
position: absolute;
top: 0;
right: 0;
display: flex;
}
&__action {
margin-left: 4px;
// float: right;
// display: none;
visibility: hidden;
}
}
import { PropType } from 'vue'; import type { PropType } from 'vue';
import type { ReplaceFields, TreeItem, ActionItem, Keys, CheckKeys } from './types'; import type { ReplaceFields, ActionItem, Keys, CheckKeys } from './types';
import type { ContextMenuItem } from '/@/hooks/web/useContextMenu'; import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
export const basicProps = { export const basicProps = {
renderIcon: {
type: Function as PropType<(params: Recordable) => string>,
},
replaceFields: { replaceFields: {
type: Object as PropType<ReplaceFields>, type: Object as PropType<ReplaceFields>,
}, },
treeData: { treeData: {
type: Array as PropType<TreeItem[]>, type: Array as PropType<TreeDataItem[]>,
}, },
actionList: { actionList: {
...@@ -50,7 +54,7 @@ export const treeNodeProps = { ...@@ -50,7 +54,7 @@ export const treeNodeProps = {
type: Object as PropType<ReplaceFields>, type: Object as PropType<ReplaceFields>,
}, },
treeData: { treeData: {
type: Array as PropType<TreeItem[]>, type: Array as PropType<TreeDataItem[]>,
default: () => [], default: () => [],
}, },
}; };
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
export interface ActionItem { export interface ActionItem {
render: (record: any) => any; render: (record: any) => any;
} }
export interface TreeItem { export interface TreeItem extends TreeDataItem {
/**
* Class
* @description className
* @type string
*/
class?: string;
/**
* Style
* @description style of tree node
* @type string | object
*/
style?: string | object;
/**
* Disable Checkbox
* @description Disables the checkbox of the treeNode
* @default false
* @type boolean
*/
disableCheckbox?: boolean;
/**
* Disabled
* @description Disabled or not
* @default false
* @type boolean
*/
disabled?: boolean;
/**
* Icon
* @description customize icon. When you pass component, whose render will receive full TreeNode props as component props
* @type any (slot | slot-scope)
*/
icon?: any; icon?: any;
/**
* Is Leaf?
* @description Leaf node or not
* @default false
* @type boolean
*/
isLeaf?: boolean;
/**
* Key
* @description Required property, should be unique in the tree
* (In tree: Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys)
* @default internal calculated position of treeNode or undefined
* @type string | number
*/
key: string | number;
/**
* Selectable
* @description Set whether the treeNode can be selected
* @default true
* @type boolean
*/
selectable?: boolean;
/**
* Title
* @description Content showed on the treeNodes
* @default '---'
* @type any (string | slot)
*/
title: any;
/**
* Value
* @description Will be treated as treeNodeFilterProp by default, should be unique in the tree
* @default undefined
* @type string
*/
value?: string;
children?: TreeItem[];
slots?: any;
scopedSlots?: any;
} }
export interface ReplaceFields { export interface ReplaceFields {
...@@ -107,12 +29,12 @@ export interface TreeActionType { ...@@ -107,12 +29,12 @@ export interface TreeActionType {
filterByLevel: (level: number) => void; filterByLevel: (level: number) => void;
insertNodeByKey: (opt: InsertNodeParams) => void; insertNodeByKey: (opt: InsertNodeParams) => void;
deleteNodeByKey: (key: string) => void; deleteNodeByKey: (key: string) => void;
updateNodeByKey: (key: string, node: Omit<TreeItem, 'key'>) => void; updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
} }
export interface InsertNodeParams { export interface InsertNodeParams {
parentKey: string | null; parentKey: string | null;
node: TreeItem; node: TreeDataItem;
list?: TreeItem[]; list?: TreeDataItem[];
push?: 'push' | 'unshift'; push?: 'push' | 'unshift';
} }
import type { InsertNodeParams, ReplaceFields, TreeItem } from './types'; import type { InsertNodeParams, ReplaceFields } from './types';
import type { Ref, ComputedRef } from 'vue'; import type { Ref, ComputedRef } from 'vue';
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { unref } from 'vue'; import { unref } from 'vue';
import { forEach } from '/@/utils/helper/treeHelper'; import { forEach } from '/@/utils/helper/treeHelper';
export function useTree( export function useTree(
treeDataRef: Ref<TreeItem[]>, treeDataRef: Ref<TreeDataItem[]>,
getReplaceFields: ComputedRef<ReplaceFields> getReplaceFields: ComputedRef<ReplaceFields>
) { ) {
// 更新节点 // Update node
function updateNodeByKey(key: string, node: TreeItem, list?: TreeItem[]) { function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
if (!key) return; if (!key) return;
const treeData = list || unref(treeDataRef); const treeData = list || unref(treeDataRef);
const { key: keyField, children: childrenField } = unref(getReplaceFields); const { key: keyField, children: childrenField } = unref(getReplaceFields);
...@@ -30,8 +31,8 @@ export function useTree( ...@@ -30,8 +31,8 @@ export function useTree(
} }
} }
// 展开指定级别 // Expand the specified level
function filterByLevel(level = 1, list?: TreeItem[], currentLevel = 1) { function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
if (!level) { if (!level) {
return []; return [];
} }
...@@ -74,8 +75,8 @@ export function useTree( ...@@ -74,8 +75,8 @@ export function useTree(
treeDataRef.value = treeData; treeDataRef.value = treeData;
} }
// 删除节点 // Delete node
function deleteNodeByKey(key: string, list?: TreeItem[]) { function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
if (!key) return; if (!key) return;
const treeData = list || unref(treeDataRef); const treeData = list || unref(treeDataRef);
const { key: keyField, children: childrenField } = unref(getReplaceFields); const { key: keyField, children: childrenField } = unref(getReplaceFields);
......
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
setup() { setup() {
const treeRef = ref<Nullable<TreeActionType>>(null); const treeRef = ref<Nullable<TreeActionType>>(null);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
function getTree() { function getTree() {
const tree = unref(treeRef); const tree = unref(treeRef);
if (!tree) { if (!tree) {
......
<template> <template>
<PageWrapper title="Tree函数操作示例"> <PageWrapper title="Tree函数操作示例">
<div class="flex"> <div class="flex">
<CollapseContainer title="右侧操作按钮" class="mr-4" :style="{ width: '33%' }"> <CollapseContainer title="右侧操作按钮/自定义图标" class="mr-4" :style="{ width: '33%' }">
<BasicTree :treeData="treeData" :actionList="actionList" /> <BasicTree :treeData="treeData" :actionList="actionList" :renderIcon="createIcon" />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }"> <CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }">
...@@ -61,7 +61,19 @@ ...@@ -61,7 +61,19 @@
}, },
}, },
]; ];
return { treeData, actionList, getRightMenuList };
function createIcon({ level }) {
if (level === 1) {
return 'ion:git-compare-outline';
}
if (level === 2) {
return 'ion:home';
}
if (level === 3) {
return 'ion:airplane';
}
}
return { treeData, actionList, getRightMenuList, createIcon };
}, },
}); });
</script> </script>
...@@ -2,9 +2,8 @@ import { TreeItem } from '/@/components/Tree/index'; ...@@ -2,9 +2,8 @@ import { TreeItem } from '/@/components/Tree/index';
export const treeData: TreeItem[] = [ export const treeData: TreeItem[] = [
{ {
title: 'parent 1parent ', title: 'parent ',
key: '0-0', key: '0-0',
icon: 'home|svg',
children: [ children: [
{ title: 'leaf', key: '0-0-0' }, { title: 'leaf', key: '0-0-0' },
{ {
...@@ -20,7 +19,6 @@ export const treeData: TreeItem[] = [ ...@@ -20,7 +19,6 @@ export const treeData: TreeItem[] = [
{ {
title: 'parent 2', title: 'parent 2',
key: '1-1', key: '1-1',
icon: 'home|svg',
children: [ children: [
{ title: 'leaf', key: '1-1-0' }, { title: 'leaf', key: '1-1-0' },
{ title: 'leaf', key: '1-1-1' }, { title: 'leaf', key: '1-1-1' },
...@@ -29,7 +27,6 @@ export const treeData: TreeItem[] = [ ...@@ -29,7 +27,6 @@ export const treeData: TreeItem[] = [
{ {
title: 'parent 3', title: 'parent 3',
key: '2-2', key: '2-2',
icon: 'home|svg',
children: [ children: [
{ title: 'leaf', key: '2-2-0' }, { title: 'leaf', key: '2-2-0' },
{ title: 'leaf', key: '2-2-1' }, { title: 'leaf', key: '2-2-1' },
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论