提交 72b42d7b 作者: Vben

feat(tree): add renderIcon props close #309

上级 d67bd496
......@@ -11,6 +11,7 @@
- 新增修改密码界面
- 新增部门管理示例界面
- 新增 WebSocket 示例和服务脚本
- BasicTree 组件新增 `renderIcon` 属性用于控制层级图标显示
### ⚡ Performance Improvements
......
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const BasicTree = createAsyncComponent(() => import('./src/BasicTree'));
import BasicTree from './src/index.vue';
export { BasicTree };
export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
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 { ReplaceFields, TreeItem, ActionItem, Keys, CheckKeys } from './types';
import type { PropType } from 'vue';
import type { ReplaceFields, ActionItem, Keys, CheckKeys } from './types';
import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
export const basicProps = {
renderIcon: {
type: Function as PropType<(params: Recordable) => string>,
},
replaceFields: {
type: Object as PropType<ReplaceFields>,
},
treeData: {
type: Array as PropType<TreeItem[]>,
type: Array as PropType<TreeDataItem[]>,
},
actionList: {
......@@ -50,7 +54,7 @@ export const treeNodeProps = {
type: Object as PropType<ReplaceFields>,
},
treeData: {
type: Array as PropType<TreeItem[]>,
type: Array as PropType<TreeDataItem[]>,
default: () => [],
},
};
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
export interface ActionItem {
render: (record: any) => any;
}
export interface TreeItem {
/**
* 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)
*/
export interface TreeItem extends TreeDataItem {
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 {
......@@ -107,12 +29,12 @@ export interface TreeActionType {
filterByLevel: (level: number) => void;
insertNodeByKey: (opt: InsertNodeParams) => void;
deleteNodeByKey: (key: string) => void;
updateNodeByKey: (key: string, node: Omit<TreeItem, 'key'>) => void;
updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
}
export interface InsertNodeParams {
parentKey: string | null;
node: TreeItem;
list?: TreeItem[];
node: TreeDataItem;
list?: TreeDataItem[];
push?: 'push' | 'unshift';
}
import type { InsertNodeParams, ReplaceFields, TreeItem } from './types';
import type { InsertNodeParams, ReplaceFields } from './types';
import type { Ref, ComputedRef } from 'vue';
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
import { cloneDeep } from 'lodash-es';
import { unref } from 'vue';
import { forEach } from '/@/utils/helper/treeHelper';
export function useTree(
treeDataRef: Ref<TreeItem[]>,
treeDataRef: Ref<TreeDataItem[]>,
getReplaceFields: ComputedRef<ReplaceFields>
) {
// 更新节点
function updateNodeByKey(key: string, node: TreeItem, list?: TreeItem[]) {
// Update node
function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
if (!key) return;
const treeData = list || unref(treeDataRef);
const { key: keyField, children: childrenField } = unref(getReplaceFields);
......@@ -30,8 +31,8 @@ export function useTree(
}
}
// 展开指定级别
function filterByLevel(level = 1, list?: TreeItem[], currentLevel = 1) {
// Expand the specified level
function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
if (!level) {
return [];
}
......@@ -74,8 +75,8 @@ export function useTree(
treeDataRef.value = treeData;
}
// 删除节点
function deleteNodeByKey(key: string, list?: TreeItem[]) {
// Delete node
function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
if (!key) return;
const treeData = list || unref(treeDataRef);
const { key: keyField, children: childrenField } = unref(getReplaceFields);
......
......@@ -35,6 +35,7 @@
setup() {
const treeRef = ref<Nullable<TreeActionType>>(null);
const { createMessage } = useMessage();
function getTree() {
const tree = unref(treeRef);
if (!tree) {
......
<template>
<PageWrapper title="Tree函数操作示例">
<div class="flex">
<CollapseContainer title="右侧操作按钮" class="mr-4" :style="{ width: '33%' }">
<BasicTree :treeData="treeData" :actionList="actionList" />
<CollapseContainer title="右侧操作按钮/自定义图标" class="mr-4" :style="{ width: '33%' }">
<BasicTree :treeData="treeData" :actionList="actionList" :renderIcon="createIcon" />
</CollapseContainer>
<CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }">
......@@ -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>
......@@ -2,9 +2,8 @@ import { TreeItem } from '/@/components/Tree/index';
export const treeData: TreeItem[] = [
{
title: 'parent 1parent ',
title: 'parent ',
key: '0-0',
icon: 'home|svg',
children: [
{ title: 'leaf', key: '0-0-0' },
{
......@@ -20,7 +19,6 @@ export const treeData: TreeItem[] = [
{
title: 'parent 2',
key: '1-1',
icon: 'home|svg',
children: [
{ title: 'leaf', key: '1-1-0' },
{ title: 'leaf', key: '1-1-1' },
......@@ -29,7 +27,6 @@ export const treeData: TreeItem[] = [
{
title: 'parent 3',
key: '2-2',
icon: 'home|svg',
children: [
{ title: 'leaf', key: '2-2-0' },
{ title: 'leaf', key: '2-2-1' },
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论