Gitee
Appearance
Tree Grid 树列表组件
Tree View 组件以树形式展现层级结构数据。
基本用法
绑定树结构数据
禁用
尺寸
自定义行列样式
行号
启用选择行
勾选复选框选择行
勾选树节点
自动勾选节点
多选模式
选择数据范围
设置选中数据
显示全选
显示边框
显示配置按钮
显示滚动条
显示条纹
显示图标
显示连接线
新建和删除
行编辑
绑定数据
设置列
自适应列宽
空数据模板
TreeGrid
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | Object | [] | 绑定数据，可以设置TreeNode类型 |
| columns | Array<DataGridColumn> | [] | 同data grid组件columns属性 |
| hierarchy | HierarchyOptions | { hasChildrenField: 'hasChildren', layerField: 'layer', parentIdField: 'parent' } | 分级信息 |
| treeNodeIconsData | Object | {} | 树节点图标数据 |
| showTreeNodeIcons | Boolean | false | 是否显示图标集 |
| showLines | Boolean | false | 是否显示连接线 |
| newDataItem | Object | - | 新增值,是个对象类型，结构与data的每一项结构一致，但是不能是TreeNode类型 |
| idField | String | 'id' | 标识字段 |
| selection | SelectionOptions | {enableSelectRow: true,multiSelect: false,multiSelectMode: 'DependOnCheck',showCheckbox: false,showSelectAll: false} | 同data grid组件同名属性 |
TreeNodeIconsData
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| fold | string | -- | 折叠时图标class |
| unfold | string | -- | 展开时图标class |
| leafnodes | string | -- | 叶子节点图标class |
HierarchyOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| collapseField | string | -- | 自定义的收折状态属性 |
| hasChildrenField | string | -- | 自定义的包含子节点状态属性 |
| parentIdField | string | -- | 自定义的父节点标识属性 |
| cascadeOption | CascadeOptions | -- | 选中行级联配置 |
CascadeOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| autoCheckParent | boolean | -- | 选中行自动级联父级 |
| autoCheckChildren | string | -- | 选中行自动级联子级 |
| autoCancelParent | string | -- | 自动取消父级，与前两个属性配合使用 |
| selectionRange | string | -- | 选择结果范围 |
TreeNode
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | string | -- | 行数据标识属性，如果不设置，请在组件设置属性idField用于指定标识属性名 |
| children | array<TreeNode> | -- | 子节点集合 |
| hasChildren | boolean | -- | 是否存在子节点，懒加载数据时很有用 |
事件
| 事件名 | 回调参数 | 说明 |
|---|---|---|
| selectionChange | Function(selectedRawList) | 已选数据切换事件 |
| clickRow | Function(index,dataItem) | 点击行事件 |
| unSelectItem | Function(unSelectedData) | 取消选中行事件 |
| dblclickNode | Function({payload,raw}) | 双击事件 |
插槽
TIP
暂无内容