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

This commit is contained in:
Vben 2021-03-02 23:57:35 +08:00
parent b6bb81630d
commit 8b62fa0cb0
4 changed files with 14 additions and 3 deletions

View File

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

View File

@ -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: () =>

View File

@ -1,6 +1,7 @@
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 {

View File

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