devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ElementUI浅尝辄止21：Tree 树形控件_element树形控件

作者：码创造者 | 2024-07-30 10:49:21

赞

踩

element树形控件

树形组件：用清晰的层级结构展示信息，可展开或折叠。

树组件使用挺频繁的，常见于侧边栏树形目录、树形下拉选项按钮或搜索查询树形信息选项

1.如何使用？

基础的树形结构展示

  1. <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  2.  
  3. <script>
  4.   export default {
  5.     data() {
  6.       return {
  7.         data: [{
  8.           label: '一级 1',
  9.           children: [{
  10.             label: '二级 1-1',
  11.             children: [{
  12.               label: '三级 1-1-1'
  13.             }]
  14.           }]
  15.         }, {
  16.           label: '一级 2',
  17.           children: [{
  18.             label: '二级 2-1',
  19.             children: [{
  20.               label: '三级 2-1-1'
  21.             }]
  22.           }, {
  23.             label: '二级 2-2',
  24.             children: [{
  25.               label: '三级 2-2-1'
  26.             }]
  27.           }]
  28.         }, {
  29.           label: '一级 3',
  30.           children: [{
  31.             label: '二级 3-1',
  32.             children: [{
  33.               label: '三级 3-1-1'
  34.             }]
  35.           }, {
  36.             label: '二级 3-2',
  37.             children: [{
  38.               label: '三级 3-2-1'
  39.             }]
  40.           }]
  41.         }],
  42.         defaultProps: {
  43.           children: 'children',
  44.           label: 'label'
  45.         }
  46.       };
  47.     },
  48.     methods: {
  49.       handleNodeClick(data) {
  50.         console.log(data);
  51.       }
  52.     }
  53.   };
  54. </script>

2.可选择

适用于需要选择层级时使用。

  1. //可以动态加载节点数据。
  2. <el-tree
  3.   :props="props"
  4.   :load="loadNode"
  5.   lazy
  6.   show-checkbox
  7.   @check-change="handleCheckChange">
  8. </el-tree>
  9.  
  10. <script>
  11.   export default {
  12.     data() {
  13.       return {
  14.         props: {
  15.           label: 'name',
  16.           children: 'zones'
  17.         },
  18.         count: 1
  19.       };
  20.     },
  21.     methods: {
  22.       handleCheckChange(data, checked, indeterminate) {
  23.         console.log(data, checked, indeterminate);
  24.       },
  25.       handleNodeClick(data) {
  26.         console.log(data);
  27.       },
  28.       loadNode(node, resolve) {
  29.         if (node.level === 0) {
  30.           return resolve([{ name: 'region1' }, { name: 'region2' }]);
  31.         }
  32.         if (node.level > 3) return resolve([]);
  33.  
  34.         var hasChild;
  35.         if (node.data.name === 'region1') {
  36.           hasChild = true;
  37.         } else if (node.data.name === 'region2') {
  38.           hasChild = false;
  39.         } else {
  40.           hasChild = Math.random() > 0.5;
  41.         }
  42.  
  43.         setTimeout(() => {
  44.           var data;
  45.           if (hasChild) {
  46.             data = [{
  47.               name: 'zone' + this.count++
  48.             }, {
  49.               name: 'zone' + this.count++
  50.             }];
  51.           } else {
  52.             data = [];
  53.           }
  54.  
  55.           resolve(data);
  56.         }, 500);
  57.       }
  58.     }
  59.   };
  60. </script>

3.懒加载自定义叶子节点

  1. /*由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。*/
  2.  
  3. <el-tree
  4.   :props="props"
  5.   :load="loadNode"
  6.   lazy
  7.   show-checkbox>
  8. </el-tree>
  9.  
  10. <script>
  11.   export default {
  12.     data() {
  13.       return {
  14.         props: {
  15.           label: 'name',
  16.           children: 'zones',
  17.           isLeaf: 'leaf'
  18.         },
  19.       };
  20.     },
  21.     methods: {
  22.       loadNode(node, resolve) {
  23.         if (node.level === 0) {
  24.           return resolve([{ name: 'region' }]);
  25.         }
  26.         if (node.level > 1) return resolve([]);
  27.  
  28.         setTimeout(() => {
  29.           const data = [{
  30.             name: 'leaf',
  31.             leaf: true
  32.           }, {
  33.             name: 'zone'
  34.           }];
  35.  
  36.           resolve(data);
  37.         }, 500);
  38.       }
  39.     }
  40.   };
  41. </script>

4.默认展开和默认选中

可将 Tree 的某些节点设置为默认展开或默认选中

  1. /*分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。*/
  2.  
  3. <el-tree
  4.   :data="data"
  5.   show-checkbox
  6.   node-key="id"
  7.   :default-expanded-keys="[2, 3]"
  8.   :default-checked-keys="[5]"
  9.   :props="defaultProps">
  10. </el-tree>
  11.  
  12. <script>
  13.   export default {
  14.     data() {
  15.       return {
  16.         data: [{
  17.           id: 1,
  18.           label: '一级 1',
  19.           children: [{
  20.             id: 4,
  21.             label: '二级 1-1',
  22.             children: [{
  23.               id: 9,
  24.               label: '三级 1-1-1'
  25.             }, {
  26.               id: 10,
  27.               label: '三级 1-1-2'
  28.             }]
  29.           }]
  30.         }, {
  31.           id: 2,
  32.           label: '一级 2',
  33.           children: [{
  34.             id: 5,
  35.             label: '二级 2-1'
  36.           }, {
  37.             id: 6,
  38.             label: '二级 2-2'
  39.           }]
  40.         }, {
  41.           id: 3,
  42.           label: '一级 3',
  43.           children: [{
  44.             id: 7,
  45.             label: '二级 3-1'
  46.           }, {
  47.             id: 8,
  48.             label: '二级 3-2'
  49.           }]
  50.         }],
  51.         defaultProps: {
  52.           children: 'children',
  53.           label: 'label'
  54.         }
  55.       };
  56.     }
  57.   };
  58. </script>

5.禁用状态

可将 Tree 的某些节点设置为禁用状态

  1. //通过disabled设置禁用状态。
  2.  
  3. <el-tree
  4.   :data="data"
  5.   show-checkbox
  6.   node-key="id"
  7.   :default-expanded-keys="[2, 3]"
  8.   :default-checked-keys="[5]">
  9. </el-tree>
  10.  
  11. <script>
  12.   export default {
  13.     data() {
  14.       return {
  15.         data: [{
  16.           id: 1,
  17.           label: '一级 2',
  18.           children: [{
  19.             id: 3,
  20.             label: '二级 2-1',
  21.             children: [{
  22.               id: 4,
  23.               label: '三级 3-1-1'
  24.             }, {
  25.               id: 5,
  26.               label: '三级 3-1-2',
  27.               disabled: true
  28.             }]
  29.           }, {
  30.             id: 2,
  31.             label: '二级 2-2',
  32.             disabled: true,
  33.             children: [{
  34.               id: 6,
  35.               label: '三级 3-2-1'
  36.             }, {
  37.               id: 7,
  38.               label: '三级 3-2-2',
  39.               disabled: true
  40.             }]
  41.           }]
  42.         }],
  43.         defaultProps: {
  44.           children: 'children',
  45.           label: 'label'
  46.         }
  47.       };
  48.     }
  49.   };
  50. </script>

6.树节点的选择

  1. /*如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置node-key。*/
  2.  
  3. <el-tree
  4.   :data="data"
  5.   show-checkbox
  6.   default-expand-all
  7.   node-key="id"
  8.   ref="tree"
  9.   highlight-current
  10.   :props="defaultProps">
  11. </el-tree>
  12.  
  13. <div class="buttons">
  14.   <el-button @click="getCheckedNodes">通过 node 获取</el-button>
  15.   <el-button @click="getCheckedKeys">通过 key 获取</el-button>
  16.   <el-button @click="setCheckedNodes">通过 node 设置</el-button>
  17.   <el-button @click="setCheckedKeys">通过 key 设置</el-button>
  18.   <el-button @click="resetChecked">清空</el-button>
  19. </div>
  20.  
  21. <script>
  22.   export default {
  23.     methods: {
  24.       getCheckedNodes() {
  25.         console.log(this.$refs.tree.getCheckedNodes());
  26.       },
  27.       getCheckedKeys() {
  28.         console.log(this.$refs.tree.getCheckedKeys());
  29.       },
  30.       setCheckedNodes() {
  31.         this.$refs.tree.setCheckedNodes([{
  32.           id: 5,
  33.           label: '二级 2-1'
  34.         }, {
  35.           id: 9,
  36.           label: '三级 1-1-1'
  37.         }]);
  38.       },
  39.       setCheckedKeys() {
  40.         this.$refs.tree.setCheckedKeys([3]);
  41.       },
  42.       resetChecked() {
  43.         this.$refs.tree.setCheckedKeys([]);
  44.       }
  45.     },
  46.  
  47.     data() {
  48.       return {
  49.         data: [{
  50.           id: 1,
  51.           label: '一级 1',
  52.           children: [{
  53.             id: 4,
  54.             label: '二级 1-1',
  55.             children: [{
  56.               id: 9,
  57.               label: '三级 1-1-1'
  58.             }, {
  59.               id: 10,
  60.               label: '三级 1-1-2'
  61.             }]
  62.           }]
  63.         }, {
  64.           id: 2,
  65.           label: '一级 2',
  66.           children: [{
  67.             id: 5,
  68.             label: '二级 2-1'
  69.           }, {
  70.             id: 6,
  71.             label: '二级 2-2'
  72.           }]
  73.         }, {
  74.           id: 3,
  75.           label: '一级 3',
  76.           children: [{
  77.             id: 7,
  78.             label: '二级 3-1'
  79.           }, {
  80.             id: 8,
  81.             label: '二级 3-2'
  82.           }]
  83.         }],
  84.         defaultProps: {
  85.           children: 'children',
  86.           label: 'label'
  87.         }
  88.       };
  89.     }
  90.   };
  91. </script>

7.自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

  1. /*可以通过两种方法进行树节点内容的自定义：render-content和 scoped slot。使用render-content指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以render-content示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。*/
  2.  
  3. <div class="custom-tree-container">
  4.   <div class="block">
  5.     <p>使用 render-content</p>
  6.     <el-tree
  7.       :data="data"
  8.       show-checkbox
  9.       node-key="id"
  10.       default-expand-all
  11.       :expand-on-click-node="false"
  12.       :render-content="renderContent">
  13.     </el-tree>
  14.   </div>
  15.   <div class="block">
  16.     <p>使用 scoped slot</p>
  17.     <el-tree
  18.       :data="data"
  19.       show-checkbox
  20.       node-key="id"
  21.       default-expand-all
  22.       :expand-on-click-node="false">
  23.       <span class="custom-tree-node" slot-scope="{ node, data }">
  24.         <span>{{ node.label }}</span>
  25.         <span>
  26.           <el-button
  27.             type="text"
  28.             size="mini"
  29.             @click="() => append(data)">
  30.             Append
  31.           </el-button>
  32.           <el-button
  33.             type="text"
  34.             size="mini"
  35.             @click="() => remove(node, data)">
  36.             Delete
  37.           </el-button>
  38.         </span>
  39.       </span>
  40.     </el-tree>
  41.   </div>
  42. </div>
  43.  
  44. <script>
  45.   let id = 1000;
  46.  
  47.   export default {
  48.     data() {
  49.       const data = [{
  50.         id: 1,
  51.         label: '一级 1',
  52.         children: [{
  53.           id: 4,
  54.           label: '二级 1-1',
  55.           children: [{
  56.             id: 9,
  57.             label: '三级 1-1-1'
  58.           }, {
  59.             id: 10,
  60.             label: '三级 1-1-2'
  61.           }]
  62.         }]
  63.       }, {
  64.         id: 2,
  65.         label: '一级 2',
  66.         children: [{
  67.           id: 5,
  68.           label: '二级 2-1'
  69.         }, {
  70.           id: 6,
  71.           label: '二级 2-2'
  72.         }]
  73.       }, {
  74.         id: 3,
  75.         label: '一级 3',
  76.         children: [{
  77.           id: 7,
  78.           label: '二级 3-1'
  79.         }, {
  80.           id: 8,
  81.           label: '二级 3-2'
  82.         }]
  83.       }];
  84.       return {
  85.         data: JSON.parse(JSON.stringify(data)),
  86.         data: JSON.parse(JSON.stringify(data))
  87.       }
  88.     },
  89.  
  90.     methods: {
  91.       append(data) {
  92.         const newChild = { id: id++, label: 'testtest', children: [] };
  93.         if (!data.children) {
  94.           this.$set(data, 'children', []);
  95.         }
  96.         data.children.push(newChild);
  97.       },
  98.  
  99.       remove(node, data) {
  100.         const parent = node.parent;
  101.         const children = parent.data.children || parent.data;
  102.         const index = children.findIndex(d => d.id === data.id);
  103.         children.splice(index, 1);
  104.       },
  105.  
  106.       renderContent(h, { node, data, store }) {
  107.         return (
  108.           <span class="custom-tree-node">
  109.             <span>{node.label}</span>
  110.             <span>
  111.               <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
  112.               <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
  113.             </span>
  114.           </span>);
  115.       }
  116.     }
  117.   };
  118. </script>
  119.  
  120. <style>
  121.   .custom-tree-node {
  122.     flex: 1;
  123.     display: flex;
  124.     align-items: center;
  125.     justify-content: space-between;
  126.     font-size: 14px;
  127.     padding-right: 8px;
  128.   }
  129. </style>

8.节点过滤

通过关键字过滤树节点

  1. /*在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。*/
  2.  
  3. <el-input
  4.   placeholder="输入关键字进行过滤"
  5.   v-model="filterText">
  6. </el-input>
  7.  
  8. <el-tree
  9.   class="filter-tree"
  10.   :data="data"
  11.   :props="defaultProps"
  12.   default-expand-all
  13.   :filter-node-method="filterNode"
  14.   ref="tree">
  15. </el-tree>
  16.  
  17. <script>
  18.   export default {
  19.     watch: {
  20.       filterText(val) {
  21.         this.$refs.tree.filter(val);
  22.       }
  23.     },
  24.  
  25.     methods: {
  26.       filterNode(value, data) {
  27.         if (!value) return true;
  28.         return data.label.indexOf(value) !== -1;
  29.       }
  30.     },
  31.  
  32.     data() {
  33.       return {
  34.         filterText: '',
  35.         data: [{
  36.           id: 1,
  37.           label: '一级 1',
  38.           children: [{
  39.             id: 4,
  40.             label: '二级 1-1',
  41.             children: [{
  42.               id: 9,
  43.               label: '三级 1-1-1'
  44.             }, {
  45.               id: 10,
  46.               label: '三级 1-1-2'
  47.             }]
  48.           }]
  49.         }, {
  50.           id: 2,
  51.           label: '一级 2',
  52.           children: [{
  53.             id: 5,
  54.             label: '二级 2-1'
  55.           }, {
  56.             id: 6,
  57.             label: '二级 2-2'
  58.           }]
  59.         }, {
  60.           id: 3,
  61.           label: '一级 3',
  62.           children: [{
  63.             id: 7,
  64.             label: '二级 3-1'
  65.           }, {
  66.             id: 8,
  67.             label: '二级 3-2'
  68.           }]
  69.         }],
  70.         defaultProps: {
  71.           children: 'children',
  72.           label: 'label'
  73.         }
  74.       };
  75.     }
  76.   };
  77. </script>

9.手风琴模式

对于同一级的节点，每次只能展开一个

  1. <el-tree
  2.   :data="data"
  3.   :props="defaultProps"
  4.   accordion
  5.   @node-click="handleNodeClick">
  6. </el-tree>
  7.  
  8. <script>
  9.   export default {
  10.     data() {
  11.       return {
  12.         data: [{
  13.           label: '一级 1',
  14.           children: [{
  15.             label: '二级 1-1',
  16.             children: [{
  17.               label: '三级 1-1-1'
  18.             }]
  19.           }]
  20.         }, {
  21.           label: '一级 2',
  22.           children: [{
  23.             label: '二级 2-1',
  24.             children: [{
  25.               label: '三级 2-1-1'
  26.             }]
  27.           }, {
  28.             label: '二级 2-2',
  29.             children: [{
  30.               label: '三级 2-2-1'
  31.             }]
  32.           }]
  33.         }, {
  34.           label: '一级 3',
  35.           children: [{
  36.             label: '二级 3-1',
  37.             children: [{
  38.               label: '三级 3-1-1'
  39.             }]
  40.           }, {
  41.             label: '二级 3-2',
  42.             children: [{
  43.               label: '三级 3-2-1'
  44.             }]
  45.           }]
  46.         }],
  47.         defaultProps: {
  48.           children: 'children',
  49.           label: 'label'
  50.         }
  51.       };
  52.     },
  53.     methods: {
  54.       handleNodeClick(data) {
  55.         console.log(data);
  56.       }
  57.     }
  58.   };
  59. </script>

 10.可拖拽节点

通过 draggable 属性可让节点变为可拖拽。

  1. <el-tree
  2.   :data="data"
  3.   node-key="id"
  4.   default-expand-all
  5.   @node-drag-start="handleDragStart"
  6.   @node-drag-enter="handleDragEnter"
  7.   @node-drag-leave="handleDragLeave"
  8.   @node-drag-over="handleDragOver"
  9.   @node-drag-end="handleDragEnd"
  10.   @node-drop="handleDrop"
  11.   draggable
  12.   :allow-drop="allowDrop"
  13.   :allow-drag="allowDrag">
  14. </el-tree>
  15.  
  16. <script>
  17.   export default {
  18.     data() {
  19.       return {
  20.         data: [{
  21.           id: 1,
  22.           label: '一级 1',
  23.           children: [{
  24.             id: 4,
  25.             label: '二级 1-1',
  26.             children: [{
  27.               id: 9,
  28.               label: '三级 1-1-1'
  29.             }, {
  30.               id: 10,
  31.               label: '三级 1-1-2'
  32.             }]
  33.           }]
  34.         }, {
  35.           id: 2,
  36.           label: '一级 2',
  37.           children: [{
  38.             id: 5,
  39.             label: '二级 2-1'
  40.           }, {
  41.             id: 6,
  42.             label: '二级 2-2'
  43.           }]
  44.         }, {
  45.           id: 3,
  46.           label: '一级 3',
  47.           children: [{
  48.             id: 7,
  49.             label: '二级 3-1'
  50.           }, {
  51.             id: 8,
  52.             label: '二级 3-2',
  53.             children: [{
  54.              id: 11,
  55.               label: '三级 3-2-1'
  56.             }, {
  57.               id: 12,
  58.               label: '三级 3-2-2'
  59.             }, {
  60.               id: 13,
  61.               label: '三级 3-2-3'
  62.             }]
  63.           }]
  64.         }],
  65.         defaultProps: {
  66.           children: 'children',
  67.           label: 'label'
  68.         }
  69.       };
  70.     },
  71.     methods: {
  72.       handleDragStart(node, ev) {
  73.         console.log('drag start', node);
  74.       },
  75.       handleDragEnter(draggingNode, dropNode, ev) {
  76.         console.log('tree drag enter: ', dropNode.label);
  77.       },
  78.       handleDragLeave(draggingNode, dropNode, ev) {
  79.         console.log('tree drag leave: ', dropNode.label);
  80.       },
  81.       handleDragOver(draggingNode, dropNode, ev) {
  82.         console.log('tree drag over: ', dropNode.label);
  83.       },
  84.       handleDragEnd(draggingNode, dropNode, dropType, ev) {
  85.         console.log('tree drag end: ', dropNode && dropNode.label, dropType);
  86.       },
  87.       handleDrop(draggingNode, dropNode, dropType, ev) {
  88.         console.log('tree drop: ', dropNode.label, dropType);
  89.       },
  90.       allowDrop(draggingNode, dropNode, type) {
  91.         if (dropNode.data.label === '二级 3-1') {
  92.           return type !== 'inner';
  93.         } else {
  94.           return true;
  95.         }
  96.       },
  97.       allowDrag(draggingNode) {
  98.         return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
  99.       }
  100.     }
  101.   };
  102. </script>

上述内容即为Tree树组件的详细使用方法，若想深入浅出可以前往Tree组件 。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/903365
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号