# css tree Data.length>0" //先判断一下，目的是数据源中有数据了再渲染 tree 控件 : tree -data=" tree Data" 、、数据源 :defaultExpandedKeys="[ tree Data[0].key]" //根据上图的key值绑定 :blockNod 自动选中所有 节点 a- tree 的v-model 默认 就是checkedKeys，因此 默认 选中所有 节点 (父 节点 和子 节点 )，只要在created周期钩子里将checkedKeys初始化成所有子 节点 就好了。 自动 展开 所有 节点 ： defaultE <a- tree v-if="leftModel Tree .length" 解决异步加载数据后， 展开 所有 节点 失败的问题 : tree -data="leftModel Tree " 数据源 :replaceFields="replaceFields" 自定义渲染字段title、key、children :defaultExpandAll="true" 展开 所有 节点 通过小三角元素加一个伪元素让小三角点击范围覆盖右边文字部分，从而点击文字部分控制子级 展开 /收起，实际还是在操作小三角。另外通过hover来实现文字部分的背景，达到好的体验效果。： ant design 中 tree 选择器只能通过点击小三角 展开 子级，体验不太好，希望能点title文字 展开 /收起。 实现逻辑及注意事项： 1. props规范的是data中数据的key值，例如defaultProps中 设置 label展示的是key值设定为chapterTitle，那么就会将data333中key值为chapterTitle的值作为展示 2. node-key 绑定的是数据中能够唯一标识... 架构树el- tree 需要实现全部 展开 和全部收起功能，查阅资料借鉴别人的经验终于实现 this.$refs. tree .store 打印出来的是这样的数据，里面的expanded就是控制 展开 收起的功能 <div class="expand"> <el-button size="small" @click="expandHandle">{{ expandAll ? "全部收起" : "全部 展开 "