vue+Element实现Tree树形（是否默认展开所有节点属性: default-expand-all）

最新推荐文章于 2024-08-29 19:30:00 发布

前端王小婷

最新推荐文章于 2024-08-29 19:30:00 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/weixin_44763569/article/details/116793285

版权

本文介绍了如何在vue-element-admin项目中使用Tree TreeTable组件。详细讲解了如何配置default-expanded-keys和default-checked-keys来设置默认展开和选中节点，并强调了node-key字段的重要性。同时，文章还提到了从后端获取JSON数据后进行格式转换以匹配组件需求的过程，提供了静态和动态演示示例。

摘要由CSDN通过智能技术生成

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

推荐指数：star:62.1k
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/

今天就来说一下，怎么使用Tree Table 树形表格。废话不多说，首先看一下官方文档吧，看看官方文档是怎么给到的例子吧：
组件：https://element.eleme.cn/#/zh-CN/component/tree

分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

静态
在文档上选一颗自己想要的树的demo

<template>
  <div class="grid-content bg-purple">
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :default-expanded-keys=