Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础用法

基础的树形结构展示。

<el-tree [model]="data">
</el-tree>
<script type="text">
// in Component
data: any = [{
  label: '一级 1',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1',
    }]
  }]
}, {
  label: '一级 2',
  children: [{
    label: '二级 2-1',
  }]
}, {
  label: '一级 3',
}]
</script>

可选择

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

<el-tree [model]="data" [show-checkbox]="true">
</el-tree>
<script type="text">
// in Component
data: any = [{
  label: '一级 1',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1',
    }]
  }]
}, {
  label: '一级 2',
  children: [{
    label: '二级 2-1',
  }]
}, {
  label: '一级 3',
}]
</script>

默认展开和默认选中

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

使用 default-expanded-keys 或 default-checked-keys 属性来设置默认展开和选中时，需要注意的是这这两个设置项表示 源数据中的 id，如果 model data 没有 id 属性，你需要为每一项数据手动增加唯一的 id。

<el-tree [model]="data2" [show-checkbox]="true">
</el-tree>
<script type="text">
// in Component
data2: any = [{
  label: '一级 1',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1',
      checked: true,
      expanded: true,
    }]
  }]
}, {
  label: '一级 2',
  children: [{
    label: '二级 2-1',
  }]
}, {
  label: '一级 3',
}]
</script>

钩子函数

钩子函数可以帮助你手动设置数据

<el-tree [model]="data">
</el-tree>
<script type="text">
// in Component
data: any = [{
  label: '一级 1',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1',
    }]
  }]
}, {
  label: '一级 2',
  children: [{
    label: '二级 2-1',
  }]
}, {
  label: '一级 3',
}]
</script>

手风琴模式

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

<el-tree [model]="data" [accordion]="true">
</el-tree>
<script type="text">
// in Component
data: any = [{
  label: '一级 1',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1',
    }]
  }]
}, {
  label: '一级 2',
  children: [{
    label: '二级 2-1',
  }]
}, {
  label: '一级 3',
}]
</script>

Tree Attributes