Commit 8b62fa0cb0559ec3ea8a1b82a2d44165b2337522
1 parent
b6bb8163
feat(tree): actionItem added show attribute close #314
Showing
4 changed files
with
14 additions
and
3 deletions
CHANGELOG.zh_CN.md
| @@ -12,6 +12,7 @@ | @@ -12,6 +12,7 @@ | ||
| 12 | - 新增部门管理示例界面 | 12 | - 新增部门管理示例界面 |
| 13 | - 新增 WebSocket 示例和服务脚本 | 13 | - 新增 WebSocket 示例和服务脚本 |
| 14 | - BasicTree 组件新增 `renderIcon` 属性用于控制层级图标显示 | 14 | - BasicTree 组件新增 `renderIcon` 属性用于控制层级图标显示 |
| 15 | +- BasicTree->actionItem 新增 show 属性，用于动态控制按钮显示 | ||
| 15 | 16 | ||
| 16 | ### ⚡ Performance Improvements | 17 | ### ⚡ Performance Improvements |
| 17 | 18 |
src/components/Tree/src/index.vue
| @@ -16,7 +16,7 @@ | @@ -16,7 +16,7 @@ | ||
| 16 | // import { DownOutlined } from '@ant-design/icons-vue'; | 16 | // import { DownOutlined } from '@ant-design/icons-vue'; |
| 17 | 17 | ||
| 18 | import { omit, get } from 'lodash-es'; | 18 | import { omit, get } from 'lodash-es'; |
| 19 | - import { isFunction } from '/@/utils/is'; | 19 | + import { isBoolean, isFunction } from '/@/utils/is'; |
| 20 | import { extendSlots } from '/@/utils/helper/tsxHelper'; | 20 | import { extendSlots } from '/@/utils/helper/tsxHelper'; |
| 21 | 21 | ||
| 22 | import { useTree } from './useTree'; | 22 | import { useTree } from './useTree'; |
| @@ -116,6 +116,14 @@ | @@ -116,6 +116,14 @@ | ||
| 116 | const { actionList } = props; | 116 | const { actionList } = props; |
| 117 | if (!actionList || actionList.length === 0) return; | 117 | if (!actionList || actionList.length === 0) return; |
| 118 | return actionList.map((item, index) => { | 118 | return actionList.map((item, index) => { |
| 119 | + if (isFunction(item.show)) { | ||
| 120 | + return item.show?.(node); | ||
| 121 | + } | ||
| 122 | + | ||
| 123 | + if (isBoolean(item.show)) { | ||
| 124 | + return item.show; | ||
| 125 | + } | ||
| 126 | + | ||
| 119 | return ( | 127 | return ( |
| 120 | <span key={index} class={`${prefixCls}__action`}> | 128 | <span key={index} class={`${prefixCls}__action`}> |
| 121 | {item.render(node)} | 129 | {item.render(node)} |
| @@ -147,7 +155,7 @@ | @@ -147,7 +155,7 @@ | ||
| 147 | > | 155 | > |
| 148 | {get(item, titleField)} | 156 | {get(item, titleField)} |
| 149 | </span> | 157 | </span> |
| 150 | - <span class={`${prefixCls}__actions`}> {renderAction(item)}</span> | 158 | + <span class={`${prefixCls}__actions`}> {renderAction({ ...item, level })}</span> |
| 151 | </span> | 159 | </span> |
| 152 | ), | 160 | ), |
| 153 | default: () => | 161 | default: () => |
src/components/Tree/src/types.ts
| 1 | import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree'; | 1 | import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree'; |
| 2 | export interface ActionItem { | 2 | export interface ActionItem { |
| 3 | - render: (record: any) => any; | 3 | + render: (record: Recordable) => any; |
| 4 | + show?: boolean | ((record: Recordable) => boolean); | ||
| 4 | } | 5 | } |
| 5 | 6 | ||
| 6 | export interface TreeItem extends TreeDataItem { | 7 | export interface TreeItem extends TreeDataItem { |
src/views/demo/tree/EditTree.vue