plain-design 0.0.97 → 1.0.0-beta.10

package/src/pages/index/components/table/DemoTableTree.tsx

@@ -0,0 +1,976 @@
+import {designPage, reactive, useRefs} from "plain-design-composition";
+
+import addressData from '../../../data/address.json';
+import treeData from '../../../data/tree.data.json';
+import {$message, Alert, Button, ButtonGroup, Checkbox, Input, Plc, PlcIndex, PlcOperation, PlcTree, Segment, SegmentGroup, Table} from "../../../../packages";
+import {DemoRow} from "../../Demo/DemoRow";
+import {tPlcType} from "../../../../packages/components/Table/plc/utils/plc.utils";
+import {iTreeNode} from "../../../../packages/components/TreeCore/createTreeNode";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {iTableOperation} from "../../../../packages/components/Table/standard/PlcOperation/PlcOperation.utils";
+import {iTreeProps} from "../../../../packages/components/TreeCore/TreeCore.type";
+
+export const demo1 = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const handler = {
+    onClickHead: (plc: tPlcType) => {
+      console.log('click head', plc.props.title);
+    },
+  };
+
+  return () => (
+    <DemoRow title="基本用法">
+      <ButtonGroup style={{ marginBottom: '12px' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Table onClickHead={handler.onClickHead}>
+        <PlcIndex/>
+        <PlcTree
+          data={treeData}
+          ref={onRef.tree}
+          title={'名称'}
+          field="name"
+          keyField="id"
+          childrenField="subs"
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoSingle = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    current: null as any,
+    checkLast: false,
+  });
+
+  return () => (
+    <DemoRow title="单选绑定(singleValueType=last)">
+
+      <ButtonGroup style={{ display: 'inline-block', marginBottom: '12px' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
+          <Checkbox v-model={state.checkLast} customReadonly/>
+          <span>只能选择叶子节点</span>
+        </Button>
+        <Button label="当前选中节点" onClick={() => {$message(state.current?.name || '无选中任何节点');}}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Button mode="fill">单值绑定：{state.current?.name || '无选中任何节点'}</Button>
+
+      <Table>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          v-model={state.current}
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          defaultExpandAll
+          singleValueType="last"
+          checkLast={state.checkLast}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoSingleAll = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    current: null as null | any[],
+    checkLast: false,
+  });
+
+  return () => (
+    <DemoRow title="单选绑定(singleValueType=all)">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
+          <Checkbox v-model={state.checkLast} customReadonly/>
+          <span>只能选择叶子节点</span>
+        </Button>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Button mode="fill">单值绑定：{(!state.current || state.current.length === 0 ? null : state.current.map(i => i.name).join('/')) || '无选中任何节点'}</Button>
+
+      <Table>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          v-model={state.current}
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          defaultExpandAll
+          singleValueType="all"
+          checkLast={state.checkLast}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoMultiple = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    checked: [] as any[],
+    checkLast: false,
+  });
+
+  return () => (
+    <DemoRow title="多选绑定多值">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
+          <Checkbox v-model={state.checkLast} customReadonly/>
+          <span>只能选择叶子节点</span>
+        </Button>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+      <Table>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          v-model={state.checked}
+          multiple
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          defaultExpandAll
+          checkLast={state.checkLast}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoSize = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+  const state = reactive({
+    size: 'normal' as any
+  });
+
+  return () => (
+    <DemoRow title="大小尺寸">
+      <SegmentGroup v-model={state.size} style={{ marginBottom: '16px' }}>
+        <Segment label="Mini" val="mini"/>
+        <Segment label="Small" val="small"/>
+        <Segment label="Normal" val="normal"/>
+        <Segment label="Large" val="large"/>
+      </SegmentGroup>
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Table size={state.size}>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoLazy = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    data: [] as any,
+  });
+
+  const lazyDemo = {
+    treeData: [],
+    isLeaf: (treeNode: iTreeNode) => {
+      return treeNode.level >= 3;
+    },
+    getChildrenData: async (treeNode: iTreeNode | null) => {
+      if (!treeNode) {
+        console.log('getChildrenData:root');
+        return lazyDemo.getCitiesByParentId(null);
+      } else {
+        console.log('getChildrenData', treeNode.data);
+        return lazyDemo.getCitiesByParentId(treeNode.data.id);
+      }
+    },
+    getCitiesByParentId(parentId: string | null) {
+      return new Promise<any[]>((resolve) => {
+        // 这个是模拟在数据库表中的数据
+        const data = [
+          { id: '1', name: '广东省', level: 1, parentId: null, subs: [] },
+          { id: '2', name: '佛山市', level: 2, parentId: '1', subs: [] },
+          { id: '3', name: '深圳市', level: 2, parentId: '1', subs: [] },
+          { id: '4', name: '禅城区', level: 3, parentId: '2', subs: [] },
+          { id: '5', name: '南山区', level: 3, parentId: '3', subs: [] },
+
+          { id: '6', name: '湖南省', level: 1, parentId: null, subs: [] },
+          { id: '7', name: '长沙市', level: 2, parentId: '6', subs: [] },
+          { id: '8', name: '邵阳市', level: 2, parentId: '6', subs: [] },
+          { id: '9', name: '天心区', level: 3, parentId: '7', subs: [] },
+
+          { id: '11', name: '陕西省', level: 1, parentId: null, subs: [] },
+        ];
+
+        // 模拟请求，请求时间大概在1s-2s之间
+        setTimeout(() => {
+          resolve(data.filter(item => item.parentId === parentId));
+        }, Math.random() * 1000 + 1000);
+      });
+    },
+  };
+
+  return () => (
+    <DemoRow title="懒加载子节点">
+      <Table>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          ref={onRef.tree}
+          v-model:data={state.data}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          lazy
+          isLeaf={lazyDemo.isLeaf}
+          getChildrenData={lazyDemo.getChildrenData}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoMultipleStrict = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  return () => (
+    <DemoRow title="多选绑定多值(互不关联)">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+      <Table>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          v-model={state.checked}
+          multiple
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          defaultExpandAll
+          checkStrictly
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoMultipleDisableCheck = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  const isCheckAble = (data: any) => {
+    return data.id.endsWith('1');
+  };
+
+  return () => (
+    <DemoRow title="禁用选中">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Table>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          v-model={state.checked}
+          multiple
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          defaultExpandAll
+          isCheckAble={isCheckAble}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoScopedSlot = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  const buildIndex = (treeNode: iTreeNode) => {
+    return [treeNode, ...treeNode.parents()].reverse().map(i => i!.index + 1).join('.');
+  };
+
+  const scopedSlotDemo = {
+    treeData: deepcopy(treeData),
+    addItem: async (treeNode: iTreeNode) => {
+      const { data } = treeNode;
+      const subs = data.subs || [];
+      const name = `n-${data.id}-${subs.length + 1}`;
+      const id = name + Date.now().toString();
+      subs.push({ id, name: `new item ${name}`, });
+      // 这里触发响应式更新，单独修改subs数组可能不会触发视图更新
+      data.subs = [...subs];
+      refs.tree!.methods.refreshCheckStatus(treeNode);
+      refs.tree!.methods.expand(id);
+    },
+    deleteItem: (treeNode: iTreeNode) => {
+      let { data, parent } = treeNode;
+      const subs = parent!.data.subs as any[];
+      const ids = subs.map(item => item.id);
+
+      subs.splice(ids.indexOf(data.id), 1);
+      if (subs.length === 0) {
+        parent!.data.subs = null;
+      }
+      refs.tree!.methods.refreshCheckStatus(treeNode.parent!);
+      refs.tree!.methods.clearInvalidChecked();
+    },
+    clear: (e: MouseEvent, treeNode: iTreeNode) => {
+      e.stopPropagation();
+      treeNode.data.subs = null;
+      refs.tree!.methods.clearInvalidChecked();
+    },
+  };
+
+  const operations: iTableOperation[] = [
+    { label: '添加', position: 'inner', handler: ({ node }) => scopedSlotDemo.addItem(refs.tree!.getTreeNodes()[node.state.index]) },
+    { label: '删除', position: 'inner', handler: ({ node }) => scopedSlotDemo.deleteItem(refs.tree!.getTreeNodes()[node.state.index]) },
+  ];
+
+  return () => (
+    <DemoRow title="插槽渲染内容">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Table showRows={10}>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          v-model={state.checked}
+          multiple
+          ref={onRef.tree}
+          data={scopedSlotDemo.treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          defaultExpandAll
+          style={{ width: '500px' }}
+          v-slots={{
+            content: ({ treeNode, tableNode }) => <>{buildIndex(treeNode)}{tableNode.data.name}</>
+          }}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <PlcOperation operations={operations}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoNodeIcon = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const nodeIcon: iTreeProps['nodeIcon'] = treeNode => treeNode.isLeaf() ? 'pi-star' : 'pi-star-fill';
+
+  return () => (
+    <DemoRow title="节点图标">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Table showRows={10}>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          nodeIcon={nodeIcon}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoAccording = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  return () => (
+    <DemoRow title="手风琴模式，打开节点的时候关闭兄弟节点">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Table showRows={10}>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          according
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoFilter = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    filterText: null as any
+  });
+
+  return () => (
+    <DemoRow title="可筛选">
+      <Input v-model={state.filterText} width="200px" suffixIcon="pi-search" style={{ marginBottom: '4px' }} placeholder="search keywords"/>
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Table showRows={10}>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          filterText={state.filterText}
+          defaultExpandAll
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoIcon = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  return () => (
+    <DemoRow title="展开图标">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Table showRows={10}>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          folderExpandIcon="pi-minus"
+          folderCollapseIcon="pi-plus"
+          leafIcon="pi-user"
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoVirtual = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  return () => (
+    <DemoRow title="虚拟滚动">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['1144179485591994368'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+      </ButtonGroup>
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Table showRows={10} virtual>
+        <PlcIndex/>
+        <PlcTree
+          title={'名称'}
+          v-model={state.checked}
+          ref={onRef.tree}
+          data={addressData}
+          keyField="id"
+          field="name"
+          childrenField="children"
+          multiple
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoDraggable = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const isLeaf = (nodeData: any) => {
+    return !nodeData.subs || nodeData.subs.length === 0;
+  };
+
+  return () => (
+    <DemoRow title="可拖拽">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Table showRows={10}>
+        <PlcIndex/>
+        <PlcTree
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          draggable
+          defaultExpandAll
+          isLeaf={isLeaf}
+        />
+
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoCheckAbleDraggable = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  const isLeaf = (nodeData: any) => {
+    return !nodeData.subs || nodeData.subs.length === 0;
+  };
+
+  return () => (
+    <DemoRow title="可拖拽 + 可选中">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Table showRows={10}>
+        <PlcIndex/>
+        <PlcTree
+          v-model={state.checked}
+          multiple
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          draggable
+          defaultExpandAll
+          isLeaf={isLeaf}
+        />
+
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demoAllowDraggable = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const isLeaf = (nodeData: any) => {
+    return !nodeData.subs || nodeData.subs.length === 0;
+  };
+  const isAllowDraggable: iTreeProps["isAllowDraggable"] = (dragNode) => {
+    return !dragNode.data.id.startsWith('2-2');
+  };
+  const isAllowDroppable: iTreeProps["isAllowDroppable"] = (dragNode, modeNode) => {
+    return !modeNode.data.id.startsWith('3');
+  };
+
+  return () => (
+    <DemoRow title="可拖拽可放置控制">
+      <Alert style={{ marginBottom: '8px' }}>
+        <div>2-2开头的id不能被拖拽</div>
+        <div>3开头的id不能放置任何节点</div>
+      </Alert>
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Table showRows={10}>
+        <PlcIndex/>
+        <PlcTree
+          ref={onRef.tree}
+          data={treeData}
+          keyField="id"
+          field="name"
+          childrenField="subs"
+          draggable
+          defaultExpandAll
+          isLeaf={isLeaf}
+          isAllowDraggable={isAllowDraggable}
+          isAllowDroppable={isAllowDroppable}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoVirtualDraggable = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: PlcTree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  return () => (
+    <DemoRow title="虚拟滚动+拖拽+多选 示例">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Table showRows={10} virtual>
+        <PlcIndex/>
+        <PlcTree
+          v-model={state.checked}
+          ref={onRef.tree}
+          data={addressData}
+          keyField="id"
+          field="name"
+          childrenField="children"
+          multiple
+          draggable
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Table>
+    </DemoRow>
+  );
+});