feat(tree): actionItem added show attribute close #314

CHANGELOG.zh_CN.md

@@ -12,6 +12,7 @@
 - 新增部门管理示例界面
 - 新增 WebSocket 示例和服务脚本
 - BasicTree 组件新增 `renderIcon` 属性用于控制层级图标显示
+- BasicTree->actionItem 新增 show 属性，用于动态控制按钮显示
 
 ### ⚡ Performance Improvements
 

src/components/Tree/src/index.vue

@@ -16,7 +16,7 @@
   // import { DownOutlined } from '@ant-design/icons-vue';
 
   import { omit, get } from 'lodash-es';
-  import { isFunction } from '/@/utils/is';
+  import { isBoolean, isFunction } from '/@/utils/is';
   import { extendSlots } from '/@/utils/helper/tsxHelper';
 
   import { useTree } from './useTree';
@@ -116,6 +116,14 @@
         const { actionList } = props;
         if (!actionList || actionList.length === 0) return;
         return actionList.map((item, index) => {
+          if (isFunction(item.show)) {
+            return item.show?.(node);
+          }
+
+          if (isBoolean(item.show)) {
+            return item.show;
+          }
+
           return (
             <span key={index} class={`${prefixCls}__action`}>
               {item.render(node)}
@@ -147,7 +155,7 @@
                     >
                       {get(item, titleField)}
                     </span>
-                    <span class={`${prefixCls}__actions`}> {renderAction(item)}</span>
+                    <span class={`${prefixCls}__actions`}> {renderAction({ ...item, level })}</span>
                   </span>
                 ),
                 default: () =>

src/components/Tree/src/types.ts

 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 export interface ActionItem {
-  render: (record: any) => any;
+  render: (record: Recordable) => any;
+  show?: boolean | ((record: Recordable) => boolean);
 }
 
 export interface TreeItem extends TreeDataItem {

src/views/demo/tree/EditTree.vue

@@ -46,6 +46,7 @@
       }
       const actionList: ActionItem[] = [
         {
+          // show:()=>boolean;
           render: (node) => {
             return h(PlusOutlined, {
               class: 'ml-2',