树形控件

何时使用

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

代码演示

  • Tree树形控件 - 图10-0
    • Tree树形控件 - 图20-0-0
      • 0-0-0-0
      • 0-0-0-1
      • 0-0-0-2
    • Tree树形控件 - 图30-0-1
      • 0-0-1-0
      • 0-0-1-1
      • 0-0-1-2
    • 0-0-2
  • Tree树形控件 - 图40-1
  • 0-2

受控操作示例

受控操作示例

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

自定义TreeNode字段

替换treeNode中 title,key,children字段为treeData中对应的字段

  1. <template>
  2. <a-tree
  3. checkable
  4. :tree-data="treeData"
  5. :default-expanded-keys="['0-0-0', '0-0-1']"
  6. :default-selected-keys="['0-0-0', '0-0-1']"
  7. :default-checked-keys="['0-0-0', '0-0-1']"
  8. :replace-fields="replaceFields"
  9. @select="onSelect"
  10. @check="onCheck"
  11. />
  12. </template>
  13. <script>
  14. const treeData = [
  15. {
  16. name: 'parent 1',
  17. key: '0-0',
  18. child: [
  19. {
  20. name: '张晨成',
  21. key: '0-0-0',
  22. disabled: true,
  23. child: [
  24. { name: 'leaf', key: '0-0-0-0', disableCheckbox: true },
  25. { name: 'leaf', key: '0-0-0-1' },
  26. ],
  27. },
  28. {
  29. name: 'parent 1-1',
  30. key: '0-0-1',
  31. child: [{ key: '0-0-1-0', name: 'zcvc' }],
  32. },
  33. ],
  34. },
  35. ];
  36. export default {
  37. data() {
  38. return {
  39. treeData,
  40. replaceFields: {
  41. children: 'child',
  42. title: 'name',
  43. },
  44. };
  45. },
  46. methods: {
  47. onSelect(selectedKeys, info) {
  48. console.log('selected', selectedKeys, info);
  49. },
  50. onCheck(checkedKeys, info) {
  51. console.log('onCheck', checkedKeys, info);
  52. },
  53. },
  54. };
  55. </script>
  • Tree树形控件 - 图80-0
    • Tree树形控件 - 图90-0-0
      • 0-0-0-0
      • 0-0-0-1
      • 0-0-0-2
    • Tree树形控件 - 图100-0-1
    • 0-0-2
  • Tree树形控件 - 图110-1
  • 0-2

拖动示例

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

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

Tree树形控件 - 图12

连接线

带连接线的树。

  1. <template>
  2. <div>
  3. <div style="margin-bottom: 16px">
  4. showLine: <a-switch v-model="showLine" />
  5. <br />
  6. <br />
  7. showIcon: <a-switch v-model="showIcon" />
  8. </div>
  9. <a-tree
  10. :show-line="showLine"
  11. :show-icon="showIcon"
  12. :default-expanded-keys="['0-0-0', '0-0-1', '0-0-2']"
  13. @select="onSelect"
  14. >
  15. <a-icon slot="icon" type="carry-out" />
  16. <a-tree-node key="0-0">
  17. <a-icon slot="icon" type="carry-out" />
  18. <span slot="title" style="color: #1890ff">parent 1</span>
  19. <a-tree-node key="0-0-0" title="parent 1-0">
  20. <a-icon slot="icon" type="carry-out" />
  21. <a-tree-node key="0-0-0-0" title="leaf">
  22. <a-icon slot="icon" type="carry-out" />
  23. </a-tree-node>
  24. <a-tree-node key="0-0-0-1" title="leaf">
  25. <a-icon slot="icon" type="carry-out" />
  26. </a-tree-node>
  27. <a-tree-node key="0-0-0-2" title="leaf">
  28. <a-icon slot="icon" type="carry-out" />
  29. </a-tree-node>
  30. </a-tree-node>
  31. <a-tree-node key="0-0-1" title="parent 1-1">
  32. <a-icon slot="icon" type="carry-out" />
  33. <a-tree-node key="0-0-1-0" title="leaf">
  34. <a-icon slot="icon" type="carry-out" />
  35. </a-tree-node>
  36. </a-tree-node>
  37. <a-tree-node key="0-0-2" title="parent 1-2">
  38. <a-icon slot="icon" type="carry-out" />
  39. <a-tree-node key="0-0-2-0" title="leaf">
  40. <a-icon slot="icon" type="carry-out" />
  41. </a-tree-node>
  42. <a-tree-node key="0-0-2-1" title="leaf">
  43. <a-icon slot="icon" type="carry-out" />
  44. <a-icon slot="switcherIcon" type="form" />
  45. </a-tree-node>
  46. </a-tree-node>
  47. </a-tree-node>
  48. </a-tree>
  49. </div>
  50. </template>
  51. <script>
  52. export default {
  53. data() {
  54. return {
  55. showLine: true,
  56. showIcon: false,
  57. };
  58. },
  59. methods: {
  60. onSelect(selectedKeys, info) {
  61. console.log('selected', selectedKeys, info);
  62. },
  63. },
  64. };
  65. </script>
  • Tree树形控件 - 图13**Tree树形控件 - 图14parent 0
    • Tree树形控件 - 图15leaf 0-0
    • Tree树形控件 - 图16leaf 0-1
  • Tree树形控件 - 图17**Tree树形控件 - 图18parent 1
    • Tree树形控件 - 图19leaf 1-0
    • Tree树形控件 - 图20leaf 1-1

目录

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

  1. <template>
  2. <a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand">
  3. <a-tree-node key="0-0" title="parent 0">
  4. <a-tree-node key="0-0-0" title="leaf 0-0" is-leaf />
  5. <a-tree-node key="0-0-1" title="leaf 0-1" is-leaf />
  6. </a-tree-node>
  7. <a-tree-node key="0-1" title="parent 1">
  8. <a-tree-node key="0-1-0" title="leaf 1-0" is-leaf />
  9. <a-tree-node key="0-1-1" title="leaf 1-1" is-leaf />
  10. </a-tree-node>
  11. </a-directory-tree>
  12. </template>
  13. <script>
  14. export default {
  15. methods: {
  16. onSelect(keys, event) {
  17. console.log('Trigger Select', keys, event);
  18. },
  19. onExpand() {
  20. console.log('Trigger Expand');
  21. },
  22. },
  23. };
  24. </script>
  • Tree树形控件 - 图21parent 1
    • Tree树形控件 - 图22parent 1-0
      • leaf
      • leaf
    • Tree树形控件 - 图23parent 1-1
      • sss

基本用法

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

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

自定义图标

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

  1. <template>
  2. <a-tree :tree-data="treeData" show-icon default-expand-all :default-selected-keys="['0-0-0']">
  3. <a-icon slot="switcherIcon" type="down" />
  4. <a-icon slot="smile" type="smile-o" />
  5. <a-icon slot="meh" type="smile-o" />
  6. <template slot="custom" slot-scope="{ selected }">
  7. <a-icon :type="selected ? 'frown' : 'frown-o'" />
  8. </template>
  9. </a-tree>
  10. </template>
  11. <script>
  12. const treeData = [
  13. {
  14. title: 'parent 1',
  15. key: '0-0',
  16. slots: {
  17. icon: 'smile',
  18. },
  19. children: [
  20. { title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },
  21. { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } },
  22. ],
  23. },
  24. ];
  25. export default {
  26. data() {
  27. return {
  28. treeData,
  29. };
  30. },
  31. methods: {
  32. onSelect(selectedKeys, info) {
  33. console.log('selected', selectedKeys, info);
  34. },
  35. onCheck(checkedKeys, info) {
  36. console.log('onCheck', checkedKeys, info);
  37. },
  38. },
  39. };
  40. </script>
  • Tree树形控件 - 图28Expand to load
  • Tree树形控件 - 图29Expand to load
  • Tree Node

异步数据加载

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

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

Tree树形控件 - 图30

可搜索

可搜索的树。

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

自定义展开/折叠图标

自定义展开/折叠图标。

  1. <template>
  2. <a-tree show-line :default-expanded-keys="['0-0-0']" @select="onSelect">
  3. <a-icon slot="switcherIcon" type="down" />
  4. <a-tree-node key="0-0" title="parent 1">
  5. <a-tree-node key="0-0-0" title="parent 1-0">
  6. <a-tree-node key="0-0-0-0" title="leaf" />
  7. <a-tree-node key="0-0-0-1" title="leaf" />
  8. <a-tree-node key="0-0-0-2" title="leaf" />
  9. </a-tree-node>
  10. <a-tree-node key="0-0-1" title="parent 1-1">
  11. <a-tree-node key="0-0-1-0" title="leaf" />
  12. </a-tree-node>
  13. <a-tree-node key="0-0-2" title="parent 1-2">
  14. <a-tree-node key="0-0-2-0" title="leaf" />
  15. <a-tree-node key="0-0-2-1" title="leaf" />
  16. </a-tree-node>
  17. </a-tree-node>
  18. </a-tree>
  19. </template>
  20. <script>
  21. export default {
  22. methods: {
  23. onSelect(selectedKeys, info) {
  24. console.log('selected', selectedKeys, info);
  25. },
  26. },
  27. };
  28. </script>

API

Tree props

参数说明类型默认值版本
blockNode是否节点占据一行booleanfalse1.5.0
treeDatatreeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 在整个树范围内唯一)array<{key, title, children, [disabled, selectable]}>
replaceFields替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段object{children:’children’, title:’title’, key:’key’ }
autoExpandParent是否自动展开父节点booleantrue
checkable节点前添加 Checkbox 复选框booleanfalse
checkedKeys(v-model)(受控)选中复选框的树节点(注意:父子节点有关联,如果传入父节点 key,则子节点自动选中;相应当子节点 key 都传入,父节点也自动选中。当设置checkablecheckStrictly,它是一个有checkedhalfChecked属性的对象,并且父子节点的选中与否不再关联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
selectable是否可选中booleantrue
selectedKeys(.sync)(受控)设置选中的树节点string[] | number[]-
showIcon是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式booleanfalse
switcherIcon自定义树节点的展开/折叠图标slot-
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-
checkable当树为 checkable 时,设置独立节点是否展示 Checkboxboolean-1.5.0
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’ ‘dblclick’stringclick

FAQ

在 showLine 时,如何隐藏子节点图标?

文件图标通过 switcherIcon 来实现,如果不需要你可以覆盖对应的样式