• 树形控件
    • 何时使用
    • 代码演示
      • 受控操作示例
      • 基本用法
      • 自定义图标
      • 拖动示例
      • 异步数据加载
      • 连接线
      • 可搜索
      • 目录
  • API
    • Tree props
    • 事件
    • TreeNode props
    • DirectoryTree props

    树形控件

    何时使用

    文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

    代码演示

    Tree树形控件 - 图1

    受控操作示例

    受控操作示例

    1. <template>
    2.   <a-tree
    3.     checkable
    4.     @expand="onExpand"
    5.     :expandedKeys="expandedKeys"
    6.     :autoExpandParent="autoExpandParent"
    7.     v-model="checkedKeys"
    8.     @select="onSelect"
    9.     :selectedKeys="selectedKeys"
    10.     :treeData="treeData"
    11.   />
    12. </template>
    13. <script>
    14. const treeData = [{
    15.   title: '0-0',
    16.   key: '0-0',
    17.   children: [{
    18.     title: '0-0-0',
    19.     key: '0-0-0',
    20.     children: [
    21.       { title: '0-0-0-0', key: '0-0-0-0' },
    22.       { title: '0-0-0-1', key: '0-0-0-1' },
    23.       { title: '0-0-0-2', key: '0-0-0-2' },
    24.     ],
    25.   }, {
    26.     title: '0-0-1',
    27.     key: '0-0-1',
    28.     children: [
    29.       { title: '0-0-1-0', key: '0-0-1-0' },
    30.       { title: '0-0-1-1', key: '0-0-1-1' },
    31.       { title: '0-0-1-2', key: '0-0-1-2' },
    32.     ],
    33.   }, {
    34.     title: '0-0-2',
    35.     key: '0-0-2',
    36.   }],
    37. }, {
    38.   title: '0-1',
    39.   key: '0-1',
    40.   children: [
    41.     { title: '0-1-0-0', key: '0-1-0-0' },
    42.     { title: '0-1-0-1', key: '0-1-0-1' },
    43.     { title: '0-1-0-2', key: '0-1-0-2' },
    44.   ],
    45. }, {
    46.   title: '0-2',
    47.   key: '0-2',
    48. }]
    50. export default {
    51.   data () {
    52.     return {
    53.       expandedKeys: ['0-0-0', '0-0-1'],
    54.       autoExpandParent: true,
    55.       checkedKeys: ['0-0-0'],
    56.       selectedKeys: [],
    57.       treeData,
    58.     }
    59.   },
    60.   watch: {
    61.     checkedKeys(val) {
    62.       console.log('onCheck', val)
    63.     }
    64.   },
    65.   methods: {
    66.     onExpand (expandedKeys) {
    67.       console.log('onExpand', expandedKeys)
    68.       // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    69.       // or, you can remove all expanded children keys.
    70.       this.expandedKeys = expandedKeys
    71.       this.autoExpandParent = false
    72.     },
    73.     onCheck (checkedKeys) {
    74.       console.log('onCheck', checkedKeys)
    75.       this.checkedKeys = checkedKeys
    76.     },
    77.     onSelect (selectedKeys, info) {
    78.       console.log('onSelect', info)
    79.       this.selectedKeys = selectedKeys
    80.     },
    81.   },
    82. }
    84. </script>

    Tree树形控件 - 图2

    基本用法

    最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。

    1. <template>
    2.   <a-tree
    3.     checkable
    4.     :treeData="treeData"
    5.     :defaultExpandedKeys="['0-0-0', '0-0-1']"
    6.     :defaultSelectedKeys="['0-0-0', '0-0-1']"
    7.     :defaultCheckedKeys="['0-0-0', '0-0-1']"
    8.     @select="this.onSelect"
    9.     @check="this.onCheck"
    10.   >
    11.     <span slot="title0010" style="color: #1890ff">sss</span>
    12.   </a-tree>
    13. </template>
    14. <script>
    15. const treeData = [{
    16.   title: 'parent 1',
    17.   key: '0-0',
    18.   children: [{
    19.     title: 'parent 1-0',
    20.     key: '0-0-0',
    21.     disabled: true,
    22.     children: [
    23.       { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
    24.       { title: 'leaf', key: '0-0-0-1' },
    25.     ],
    26.   }, {
    27.     title: 'parent 1-1',
    28.     key: '0-0-1',
    29.     children: [
    30.       { key: '0-0-1-0', slots: { title: 'title0010' }},
    31.     ],
    32.   }],
    33. }]
    35. export default {
    36.   data () {
    37.     return {
    38.       treeData,
    39.     }
    40.   },
    41.   methods: {
    42.     onSelect (selectedKeys, info) {
    43.       console.log('selected', selectedKeys, info)
    44.     },
    45.     onCheck (checkedKeys, info) {
    46.       console.log('onCheck', checkedKeys, info)
    47.     },
    48.   },
    49. }
    51. </script>

    Tree树形控件 - 图3

    自定义图标

    可以针对不同的节点定制图标。

    1. <template>
    2.   <a-tree
    3.     :treeData="treeData"
    4.     showIcon
    5.     defaultExpandAll
    6.     :defaultSelectedKeys="['0-0-0']"
    7.   >
    8.     <a-icon slot="smile" type="smile-o" />
    9.     <a-icon slot="meh" type="smile-o" />
    10.     <template slot="custom" slot-scope="{selected}">
    11.       <a-icon :type="selected ? 'frown':'frown-o'" />
    12.     </template>
    13.   </a-tree>
    14. </template>
    15. <script>
    16. const treeData = [{
    17.   title: 'parent 1',
    18.   key: '0-0',
    19.   slots: {
    20.     icon: 'smile',
    21.   },
    22.   children: [
    23.     { title: 'leaf', key: '0-0-0', slots: { icon: 'meh' }},
    24.     { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' }}],
    25. }]
    27. export default {
    28.   data () {
    29.     return {
    30.       treeData,
    31.     }
    32.   },
    33.   methods: {
    34.     onSelect (selectedKeys, info) {
    35.       console.log('selected', selectedKeys, info)
    36.     },
    37.     onCheck (checkedKeys, info) {
    38.       console.log('onCheck', checkedKeys, info)
    39.     },
    40.   },
    41. }
    43. </script>

    Tree树形控件 - 图4

    拖动示例

    将节点拖拽到其他节点内部或前后。

    1. <template>
    2.   <a-tree
    3.     class="draggable-tree"
    4.     :defaultExpandedKeys="expandedKeys"
    5.     draggable
    6.     @dragenter="onDragEnter"
    7.     @drop="onDrop"
    8.     :treeData="gData"
    9.   />
    10. </template>
    12. <script>
    13. const x = 3
    14. const y = 2
    15. const z = 1
    16. const gData = []
    18. const generateData = (_level, _preKey, _tns) => {
    19.   const preKey = _preKey || '0'
    20.   const tns = _tns || gData
    22.   const children = []
    23.   for (let i = 0; i < x; i++) {
    24.     const key = `${preKey}-${i}`
    25.     tns.push({ title: key, key })
    26.     if (i < y) {
    27.       children.push(key)
    28.     }
    29.   }
    30.   if (_level < 0) {
    31.     return tns
    32.   }
    33.   const level = _level - 1
    34.   children.forEach((key, index) => {
    35.     tns[index].children = []
    36.     return generateData(level, key, tns[index].children)
    37.   })
    38. }
    39. generateData(z)
    40. export default {
    41.   data () {
    42.     return {
    43.       gData,
    44.       expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
    45.     }
    46.   },
    47.   methods: {
    48.     onDragEnter (info) {
    49.       console.log(info)
    50.     // expandedKeys 需要受控时设置
    51.     // this.expandedKeys = info.expandedKeys
    52.     },
    53.     onDrop (info) {
    54.       console.log(info)
    55.       const dropKey = info.node.eventKey
    56.       const dragKey = info.dragNode.eventKey
    57.       const dropPos = info.node.pos.split('-')
    58.       const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
    59.       const loop = (data, key, callback) => {
    60.         data.forEach((item, index, arr) => {
    61.           if (item.key === key) {
    62.             return callback(item, index, arr)
    63.           }
    64.           if (item.children) {
    65.             return loop(item.children, key, callback)
    66.           }
    67.         })
    68.       }
    69.       const data = [...this.gData]
    71.       // Find dragObject
    72.       let dragObj
    73.       loop(data, dragKey, (item, index, arr) => {
    74.         arr.splice(index, 1)
    75.         dragObj = item
    76.       })
    77.       if (!info.dropToGap) {
    78.         // Drop on the content
    79.         loop(data, dropKey, (item) => {
    80.           item.children = item.children || [];
    81.           // where to insert 示例添加到尾部，可以是随意位置
    82.           item.children.push(dragObj);
    83.         });
    84.       } else if (
    85.         (info.node.children || []).length > 0 // Has children
    86.         && info.node.expanded // Is expanded
    87.         && dropPosition === 1 // On the bottom gap
    88.       ) {
    89.         loop(data, dropKey, (item) => {
    90.           item.children = item.children || [];
    91.           // where to insert 示例添加到尾部，可以是随意位置
    92.           item.children.unshift(dragObj);
    93.         });
    94.       } else {
    95.         let ar;
    96.         let i;
    97.         loop(data, dropKey, (item, index, arr) => {
    98.           ar = arr;
    99.           i = index;
    100.         });
    101.         if (dropPosition === -1) {
    102.           ar.splice(i, 0, dragObj);
    103.         } else {
    104.           ar.splice(i + 1, 0, dragObj);
    105.         }
    106.       }
    107.       this.gData = data
    108.     },
    109.   },
    110. }
    111. </script>

    Tree树形控件 - 图5

    异步数据加载

    点击展开节点，动态加载数据。

    1. <template>
    2.   <a-tree
    3.     :loadData="onLoadData"
    4.     :treeData="treeData"
    5.   />
    6. </template>
    8. <script>
    9. export default {
    10.   data () {
    11.     return {
    12.       treeData: [
    13.         { title: 'Expand to load', key: '0' },
    14.         { title: 'Expand to load', key: '1' },
    15.         { title: 'Tree Node', key: '2', isLeaf: true },
    16.       ],
    17.     }
    18.   },
    19.   methods: {
    20.     onLoadData (treeNode) {
    21.       return new Promise((resolve) => {
    22.         if (treeNode.dataRef.children) {
    23.           resolve()
    24.           return
    25.         }
    26.         setTimeout(() => {
    27.           treeNode.dataRef.children = [
    28.             { title: 'Child Node', key: `${treeNode.eventKey}-0` },
    29.             { title: 'Child Node', key: `${treeNode.eventKey}-1` },
    30.           ]
    31.           this.treeData = [...this.treeData]
    32.           resolve()
    33.         }, 1000)
    34.       })
    35.     },
    36.   },
    37. }
    38. </script>

    Tree树形控件 - 图6

    连接线

    带连接线的树。

    1. <template>
    2.   <a-tree
    3.     showLine
    4.     :defaultExpandedKeys="['0-0-0']"
    5.     @select="onSelect"
    6.   >
    7.     <a-tree-node key="0-0">
    8.       <span slot="title" style="color: #1890ff">parent 1</span>
    9.       <a-tree-node title="parent 1-0" key="0-0-0">
    10.         <a-tree-node title="leaf" key="0-0-0-0" />
    11.         <a-tree-node title="leaf" key="0-0-0-1" />
    12.         <a-tree-node title="leaf" key="0-0-0-2" />
    13.       </a-tree-node>
    14.       <a-tree-node title="parent 1-1" key="0-0-1">
    15.         <a-tree-node title="leaf" key="0-0-1-0" />
    16.       </a-tree-node>
    17.       <a-tree-node title="parent 1-2" key="0-0-2">
    18.         <a-tree-node title="leaf" key="0-0-2-0" />
    19.         <a-tree-node title="leaf" key="0-0-2-1" />
    20.       </a-tree-node>
    21.     </a-tree-node>
    22.   </a-tree>
    23. </template>
    25. <script>
    26. export default {
    27.   methods: {
    28.     onSelect (selectedKeys, info) {
    29.       console.log('selected', selectedKeys, info)
    30.     },
    31.   },
    32. }
    33. </script>

    Tree树形控件 - 图7

    可搜索

    可搜索的树。

    1. <template>
    2.   <div>
    3.     <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
    4.     <a-tree
    5.       @expand="onExpand"
    6.       :expandedKeys="expandedKeys"
    7.       :autoExpandParent="autoExpandParent"
    8.       :treeData="gData"
    9.     >
    10.       <template slot="title" slot-scope="{title}">
    11.         <span v-if="title.indexOf(searchValue) > -1">
    12.           {{title.substr(0, title.indexOf(searchValue))}}
    13.           <span style="color: #f50">{{searchValue}}</span>
    14.           {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
    15.         </span>
    16.         <span v-else>{{title}}</span>
    17.       </template>
    18.     </a-tree>
    19.   </div>
    20. </template>
    22. <script>
    23. const x = 3
    24. const y = 2
    25. const z = 1
    26. const gData = []
    28. const generateData = (_level, _preKey, _tns) => {
    29.   const preKey = _preKey || '0'
    30.   const tns = _tns || gData
    32.   const children = []
    33.   for (let i = 0; i < x; i++) {
    34.     const key = `${preKey}-${i}`
    35.     tns.push({ title: key, key, scopedSlots: { title: 'title' }})
    36.     if (i < y) {
    37.       children.push(key)
    38.     }
    39.   }
    40.   if (_level < 0) {
    41.     return tns
    42.   }
    43.   const level = _level - 1
    44.   children.forEach((key, index) => {
    45.     tns[index].children = []
    46.     return generateData(level, key, tns[index].children)
    47.   })
    48. }
    49. generateData(z)
    51. const dataList = []
    52. const generateList = (data) => {
    53.   for (let i = 0; i < data.length; i++) {
    54.     const node = data[i]
    55.     const key = node.key
    56.     dataList.push({ key, title: key })
    57.     if (node.children) {
    58.       generateList(node.children, node.key)
    59.     }
    60.   }
    61. }
    62. generateList(gData)
    64. const getParentKey = (key, tree) => {
    65.   let parentKey
    66.   for (let i = 0; i < tree.length; i++) {
    67.     const node = tree[i]
    68.     if (node.children) {
    69.       if (node.children.some(item => item.key === key)) {
    70.         parentKey = node.key
    71.       } else if (getParentKey(key, node.children)) {
    72.         parentKey = getParentKey(key, node.children)
    73.       }
    74.     }
    75.   }
    76.   return parentKey
    77. }
    78. export default {
    79.   data () {
    80.     return {
    81.       expandedKeys: [],
    82.       searchValue: '',
    83.       autoExpandParent: true,
    84.       gData,
    85.     }
    86.   },
    87.   methods: {
    88.     onExpand  (expandedKeys) {
    89.       this.expandedKeys = expandedKeys
    90.       this.autoExpandParent = false
    91.     },
    92.     onChange (e) {
    93.       const value = e.target.value
    94.       const expandedKeys = dataList.map((item) => {
    95.         if (item.key.indexOf(value) > -1) {
    96.           return getParentKey(item.key, gData)
    97.         }
    98.         return null
    99.       }).filter((item, i, self) => item && self.indexOf(item) === i)
    100.       Object.assign(this, {
    101.         expandedKeys,
    102.         searchValue: value,
    103.         autoExpandParent: true,
    104.       })
    105.     },
    106.   },
    107. }
    108. </script>

    Tree树形控件 - 图8

    目录

    内置的目录树，multiple 模式支持 ctrl(Windows) / command(Mac) 复选。

    1. <template>
    2.   <a-directory-tree
    3.     multiple
    4.     defaultExpandAll
    5.     @select="onSelect"
    6.     @expand="onExpand"
    7.   >
    8.     <a-tree-node title="parent 0" key="0-0">
    9.       <a-tree-node title="leaf 0-0" key="0-0-0" isLeaf />
    10.       <a-tree-node title="leaf 0-1" key="0-0-1" isLeaf />
    11.     </a-tree-node>
    12.     <a-tree-node title="parent 1" key="0-1">
    13.       <a-tree-node title="leaf 1-0" key="0-1-0" isLeaf />
    14.       <a-tree-node title="leaf 1-1" key="0-1-1" isLeaf />
    15.     </a-tree-node>
    16.   </a-directory-tree>
    17. </template>
    18. <script>
    19. export default {
    20.   methods: {
    21.     onSelect (keys) {
    22.       console.log('Trigger Select', keys);
    23.     },
    24.     onExpand () {
    25.       console.log('Trigger Expand');
    26.     },
    27.   },
    28. }
    30. </script>

    API

    Tree props

    参数说明类型默认值
    treeData节点的配置描述，具体项见下表, 1.1.4之前的版本使用treeNodesarray—
    autoExpandParent是否自动展开父节点booleantrue
    checkable节点前添加 Checkbox 复选框booleanfalse
    checkedKeys(v-model)（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置checkable和checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联string[] | number[] | {checked: string[] | number[], halfChecked: string[] | number[]}[]
    checkStrictlycheckable状态下节点选择完全受控（父子节点选中状态不再关联）booleanfalse
    defaultCheckedKeys默认选中复选框的树节点string[] | number[][]
    defaultExpandAll默认展开所有树节点booleanfalse
    defaultExpandedKeys默认展开指定的树节点string[] | number[][]
    defaultExpandParent默认展开父节点booltrue
    defaultSelectedKeys默认选中的树节点string[] | number[][]
    disabled将树禁用boolfalse
    draggable设置节点可拖拽booleanfalse
    expandedKeys(.sync)（受控）展开指定的树节点string[] | number[][]
    filterTreeNode按需筛选树节点（高亮），返回truefunction(node)-
    loadData异步加载数据function(node)-
    loadedKeys（受控）已经加载的节点，需要配合 loadData 使用string[] | number[][]
    multiple支持点选多个节点（节点本身）booleanfalse
    selectedKeys(.sync)（受控）设置选中的树节点string[] | number[]-
    showIcon是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式booleanfalse
    showLine是否展示连接线booleanfalse

    事件

    事件名称说明回调参数
    check点击复选框触发function(checkedKeys, e:{checked: bool, checkedNodes, node, event})
    dragenddragend 触发时调用function({event, node})
    dragenterdragenter 触发时调用function({event, node, expandedKeys})
    dragleavedragleave 触发时调用function({event, node})
    dragoverdragover 触发时调用function({event, node})
    dragstart开始拖拽时调用function({event, node})
    dropdrop 触发时调用function({event, node, dragNode, dragNodesKeys})
    expand展开/收起节点时触发function(expandedKeys, {expanded: bool, node})
    load节点加载完毕时触发function(loadedKeys, {event, node})
    rightClick响应右键点击function({event, node})
    select点击树节点触发function(selectedKeys, e:{selected: bool, selectedNodes, node, event})

    TreeNode props

    结点描述数据对象，是 treeNodes 中的一项，TreeNode 使用相同的 API。

    参数说明类型默认值
    class节点的 classstring-
    style节点的 stylestring|object-
    disableCheckbox禁掉 checkboxbooleanfalse
    disabled禁掉响应booleanfalse
    icon自定义图标。可接收组件，props 为当前节点 propsslot|slot-scope-
    isLeaf设置为叶子节点(设置了loadData时有效)booleanfalse
    key被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！string | number内部计算出的节点位置
    selectable设置节点是否可被选中booleantrue
    title标题string|slot|slot-scope'—-'
    slots使用treeNodes时，可以通过该属性配置支持slot的属性，如 slots: { title: 'XXX'}object-
    scopedSlots使用columns时，可以通过该属性配置支持slot-scope的属性，如 scopedSlots: { title: 'XXX'}object-
    on事件对象，仅在treeNodes使用方式中生效，如{click: () => {}}object'—-'

    DirectoryTree props

    参数说明类型默认值
    expandAction目录展开逻辑，可选 false 'click' 'doubleclick'stringclick