后端
value作为键
package com.dam.model.vo.shiftScheduling; import lombok.Data; import java.util.List; /** * 将任务以 年 月 区分开来 */ @Data public class TaskCreateTimeTreeItemVo { private Long value; private String label; private List<TaskCreateTimeTreeItemVo> children; public TaskCreateTimeTreeItemVo(Long value, String label) { this.value = value; this.label = label; } }
前端
html
<div style="padding: 5px;"> <span style="margin-right: 20px;margin-left:15px;font-weight: bold;">时间树</span> <el-button id="button-black" style="font-weight: bold;" type="text" icon="iconfont icon-expand" v-if="isExpand==false" size="mini" @click="foldOrExpand()"></el-button> <el-button id="button-black" style="font-weight: bold;" type="text" icon="iconfont icon-zhedie" v-if="isExpand==true" size="mini" @click="foldOrExpand()"></el-button> </div> <div> <el-tree class="filter-tree" :data="dateTree" :props="defaultProps" :filter-node-method="filterNode" :default-expanded-keys="treeExpandedKeyArr" @node-click="handleNodeClick" ref="dateTree" node-key="value"> <span class="custom-tree-node" slot-scope="{ node, data }"> <i class="iconfont icon-nianfen" v-if="(node.label + '').indexOf('年') != -1"></i> <i class="iconfont icon-yuefen" v-if="(node.label + '').indexOf('月') != -1"></i> <span style="font-size: 14px;margin-left: 5px;">{{ node.label }}</span> </span> </el-tree> </div>
前端
html
<div style="padding: 5px;"> <span style="margin-right: 20px;margin-left:15px;font-weight: bold;">时间树</span> <el-button id="button-black" style="font-weight: bold;" type="text" icon="iconfont icon-expand" v-if="isExpand==false" size="mini" @click="foldOrExpand()"></el-button> <el-button id="button-black" style="font-weight: bold;" type="text" icon="iconfont icon-zhedie" v-if="isExpand==true" size="mini" @click="foldOrExpand()"></el-button> </div> <div> <el-tree class="filter-tree" :data="dateTree" :props="defaultProps" :filter-node-method="filterNode" :default-expanded-keys="treeExpandedKeyArr" @node-click="handleNodeClick" ref="dateTree" node-key="value"> <span class="custom-tree-node" slot-scope="{ node, data }"> <i class="iconfont icon-nianfen" v-if="(node.label + '').indexOf('年') != -1"></i> <i class="iconfont icon-yuefen" v-if="(node.label + '').indexOf('月') != -1"></i> <span style="font-size: 14px;margin-left: 5px;">{{ node.label }}</span> </span> </el-tree> </div>
js
// 一键折叠/展开 foldOrExpand() { this.isExpand = !this.isExpand this.expandFunc(this.dateTree) }, // 遍历树形数据，通过设置每一项的expanded属性，实现展开与折叠 expandFunc(data) { data.forEach(item => { this.$refs.dateTree.store.nodesMap[item.value].expanded = this.isExpand if (item.children != null && item.children.length > 0) { this.expandFunc(item.children) } }) },
效果
