ElementUI 树形结构默认展示某个节点

最新推荐文章于 2024-08-12 15:10:04 发布

絮落锦乡

最新推荐文章于 2024-08-12 15:10:04 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： vue elementUI elementUI默认展开节点

本文链接：https://blog.csdn.net/xljx_1/article/details/102838129

版权

本文介绍如何在ElementUI中设置树形组件的默认展开节点。关键在于设置`node-key`属性，它应对应节点数据中唯一标识字段的名称。未设置`node-key`将导致无法默认展开节点。

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

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

如果没有设置node-key 则无法默认展开。

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]"
  :props="defaultProps">
</el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'