ant-design-vue中的a-tree添加节点按钮

Edited on In , ,

Ant-Design官网

treeNode 添加自定义按钮

a-tree 中的节点需要添加自定义按钮，这里就直接展示：

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 <a-tree @click="handleClick"
         @rightClick="rightHandle"
         :treeData="$treeData(orgTree,{title: 'custom'})"
          @expand="onExpand">
     <template slot="custom" slot-scope="item">
         <span>{{ item.title }}</span>
         <a-dropdown style="padding: 0 0 0 10px;">
             <a class="ant-dropdown-link">
                 <a-icon type="bars"/>
             </a>
              <a-menu slot="overlay">
                  <a-menu-item>
                      <a href="javascript:;">
                          <a-icon type="file-add"/>
                      </a>
                  </a-menu-item>
                  <a-menu-item>
                      <a href="javascript:;">
                          <a-icon type="file-text"/>
                      </a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">
                      <a-icon type="delete"/>
                    </a>
                  </a-menu-item>
             </a-menu>
         </a-dropdown>
     </template>
</a-tree>

$treeData 是定义的一个过滤树节点的方法，给每个节点添加参数

1
scopedSlots: {title: 'custom'}

tree 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
export declare class Tree extends AntdComponent {
  static TreeNode: typeof TreeNode;
  static DirectoryTree: typeof DictionaryTree;

  blockNode: boolean;
  selectable: boolean;
  /**
   * treeNode of tree
   * @type TreeNode[]
   */
  treeData: TreeNode[];

  /**
   *
   *@description Replace the title,key and children fields in treeNode with the corresponding fields in treeData
   */
  replaceFields?: {
    /**@default 'children' */
    children?: string;
    /**@default 'title' */
    title?: string;
    /**@default 'key' */
    key?: string;
  };

  /**
   * Whether to automatically expand a parent treeNode
   * @default true
   * @type boolean
   */
  autoExpandParent: boolean;

  /**
   * Adds a Checkbox before the treeNodes
   * @default false
   * @type boolean
   */
  checkable: boolean;

  /**
   * (Controlled) Specifies the keys of the checked treeNodes
   * (PS: When this specifies the key of a treeNode which is also a parent treeNode,
   * all the children treeNodes of will be checked; and vice versa,
   * when it specifies the key of a treeNode which is a child treeNode,
   * its parent treeNode will also be checked. When checkable and checkStrictly is true,
   * its object has checked and halfChecked property. Regardless of whether the child or parent treeNode is checked,
   * they won't impact each other.
   * @default []
   * @type string[] | number[] | { checked: string[]; halfChecked: string[] }
   */
  checkedKeys:
    | string[]
    | number[]
    | {
        checked: string[];
        halfChecked: string[];
      };

  /**
   * Check treeNode precisely; parent treeNode and children treeNodes are not associated
   * @default false
   * @type boolean
   */
  checkStrictly: boolean;

  /**
   * Specifies the keys of the default checked treeNodes
   * @default []
   * @type string[] | number[]
   */
  defaultCheckedKeys: string[] | number[];

  /**
   * Whether to expand all treeNodes by default
   * @default false
   * @type boolean
   */
  defaultExpandAll: boolean;

  /**
   * Specify the keys of the default expanded treeNodes
   * @default []
   * @type string[] | number[]
   */
  defaultExpandedKeys: string[] | number[];

  /**
   * auto expand parent treeNodes when init
   * @default true
   * @type boolean
   */
  defaultExpandParent: boolean;

  /**
   * Specifies the keys of the default selected treeNodes
   * @default []
   * @type string[] | number[]
   */
  defaultSelectedKeys: string[] | number[];

  /**
   * whether disabled the tree
   * @default false
   * @type boolean
   */
  disabled: boolean;

  /**
   * Specifies whether this Tree is draggable (IE > 8)
   * @default false
   * @type boolean
   */
  draggable: boolean;

  /**
   * (Controlled) Specifies the keys of the expanded treeNodes
   * @default []
   * @type string[] | number[]
   */
  expandedKeys: string[] | number[];

  /**
   * Defines a function to filter (highlight) treeNodes.
   * When the function returns true, the corresponding treeNode will be highlighted
   * @type Function
   */
  filterTreeNode: (node: TreeNode) => any;

  /**
   * Load data asynchronously
   * @type Function
   */
  loadData: (node: TreeNode) => any;

  /**
   * (Controlled) Set loaded tree nodes. Need work with loadData
   * @default []
   * @type string[]
   */
  loadedKeys: string[];

  /**
   * Allows selecting multiple treeNodes
   * @default false
   * @type boolean
   */
  multiple: boolean;

  /**
   * (Controlled) Specifies the keys of the selected treeNodes
   * @type string[] | number[]
   */
  selectedKeys: string[] | number[];

  /**
   * Shows the icon before a TreeNode's title.
   * There is no default style; you must set a custom style for it if set to true
   * @default false
   * @type boolean
   */
  showIcon: boolean;

  /**
   * Shows a connecting line
   * @default false
   * @type boolean
   */
  showLine: boolean;
}

treeNode 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/**
   * 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)
   */
  icon: any;rightClick

  /**
   * 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;

  /**
   * Slots
   * @description When using treeNodes, you can use this property to configure the properties that support the slot,
   * such as slots: { title: 'XXX'}
   * @type object
   */
  slots: object;

  /**
   * Scoped Slots
   * @description When using treeNodes, you can use this property to configure the properties that support the slot,
   * such as scopedSlots: { title: 'XXX'}
   * @type object
   */
  scopedSlots: object;

本文地址：ant-design-vue中的a-tree添加节点按钮

本文地址： https://github.com/maxzhao-it/blog/post/29463/