Easy UI

Tree 树形控件 ​

树形控件用于展示层次结构数据。

引入 ​

js

js
<script type='module'>
  import "./node_modules/easy-component-ui/components/ea-tree/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

最基本的树形控件用法，展示层次结构数据。

html
<div class="demo">
  <ea-tree id="basicTree"></ea-tree>
</div>
js
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
];

const basicTree = document.querySelector("#basicTree");
basicTree.data = data;

可选择 ​

通过设置 show-checkbox 属性启用复选框选择功能。

html
<div class="demo">
  <ea-tree id="checkboxTree" show-checkbox></ea-tree>
</div>
js
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
];

const checkboxTree = document.querySelector("#checkboxTree");
checkboxTree.data = data;

禁用复选框 ​

支持禁用特定节点，通过数据中的 disabled 属性控制。

html
<div class="demo">
  <ea-tree id="disabledCheckboxTree" show-checkbox></ea-tree>
</div>
js
const idData = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 3,
        label: "Level two 2-1",
        children: [
          {
            id: 4,
            label: "Level three 3-1-1",
          },
          {
            id: 5,
            label: "Level three 3-1-2",
            disabled: true,
          },
        ],
      },
      {
        id: 2,
        label: "Level two 2-2",
        disabled: true,
        children: [
          {
            id: 6,
            label: "Level three 3-2-1",
          },
          {
            id: 7,
            label: "Level three 3-2-2",
            disabled: true,
          },
        ],
      },
    ],
  },
];

const disabledCheckboxTree = document.querySelector("#disabledCheckboxTree");
disabledCheckboxTree.data = idData;

默认展开以及默认选中 ​

通过 defaultExpandedKeys 和 defaultCheckedKeys 属性设置默认展开和选中的节点。

html
<div class="demo">
  <ea-tree id="defaultExpandedTree" node-key="id" show-checkbox></ea-tree>
</div>
js
const idData = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 3,
        label: "Level two 2-1",
        children: [
          {
            id: 4,
            label: "Level three 3-1-1",
          },
          {
            id: 5,
            label: "Level three 3-1-2",
            disabled: true,
          },
        ],
      },
      {
        id: 2,
        label: "Level two 2-2",
        disabled: true,
        children: [
          {
            id: 6,
            label: "Level three 3-2-1",
          },
          {
            id: 7,
            label: "Level three 3-2-2",
            disabled: true,
          },
        ],
      },
    ],
  },
];

const defaultExpandedTree = document.querySelector("#defaultExpandedTree");
defaultExpandedTree.defaultExpandedKeys = [1, 2];
defaultExpandedTree.defaultCheckedKeys = [3, 4];
defaultExpandedTree.data = idData;

Tree API ​

Tree Attributes ​

参数说明类型可选值默认值
show-checkbox是否显示复选框boolean-false
check-strictly是否严格模式（不关联父子节点）boolean-false
node-key节点唯一标识字段名string--
data树形数据array-[]
dataProps数据字段配置object-
defaultExpandedKeys默认展开的节点键值数组array-[]
defaultCheckedKeys默认选中的节点键值数组array-[]

Tree Methods ​

方法名说明参数
getHalfCheckedNodes获取半选中节点数据() => Array<any>
getHalfCheckedKeys获取半选中节点键值() => Array<any>
getCurrentKey获取当前选中节点键值() => any
getCurrentNode获取当前选中节点数据() => any
updateKeyChildren更新节点键值的子节点数据(key: any, data: Array<any>) => boolean
key：节点键值
data：子节点数据数组
getCheckedNodes获取选中节点数据(leafOnly?: boolean, includeHalfChecked?: boolean) => Array<any>
leafOnly：是否仅返回叶子节点
includeHalfChecked：是否包含半选中节点
setCheckedNodes设置选中节点数据(nodes: Array<any>, leafOnly?: boolean) => boolean
nodes：选中节点数据数组
leafOnly：是否仅选中叶子节点
getCheckedKeys获取选中节点键值(leafOnly?: boolean) => Array<any>
leafOnly：是否仅返回叶子节点
setCheckedKeys设置选中节点键值(keys: Array<any>, leafOnly?: boolean) => boolean
keys：选中节点键值数组
leafOnly：是否仅选中叶子节点
setChecked设置节点选中状态(keyOrData: any, checked: boolean) => boolean
keyOrData：节点键值或数据对象
checked：是否选中
setCurrentKey设置当前选中节点键值(key: any, shouldAutoExpandParent?: boolean) => boolean
key：节点键值
shouldAutoExpandParent：是否自动展开父节点
setCurrentNode设置当前选中节点数据(node: any, shouldAutoExpandParent?: boolean) => boolean
node：节点数据或键值
shouldAutoExpandParent：是否自动展开父节点
getNode获取节点信息(data: any) => any
data：节点数据或键值

Tree Events ​

事件名说明回调参数(event.detail)
ea-node-click节点点击事件{data: any}
data：节点数据
ea-node-contextmenu节点右键菜单事件{data: any, node: any}
data：节点数据
node：节点实例
ea-node-select节点选中事件{node: any, selected: boolean}
node：节点数据
selected：选中状态
ea-check-change复选框状态变化事件{data: any, checked: boolean, hasCheckedChildren: boolean}
data：节点数据
checked：选中状态
hasCheckedChildren：子树选中状态
ea-check复选框选中事件{data: any, checkedState: any}
data：节点数据
checkedState：选中状态对象
ea-current-change当前选中节点变化事件{data: any, node: any}
data：节点数据
node：节点实例
ea-node-expand节点展开事件{data: any, node: any, expanded: boolean}
data：节点数据
node：节点实例
expanded：展开状态
ea-node-collapse节点收起事件{data: any, node: any, expanded: boolean}
data：节点数据
node：节点实例
expanded：展开状态

Tree CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container树容器
children-wrapper子节点容器
children子节点
label节点标签