# AsyncTreeGird 异步树表格
TIP
AsyncTreeGird 树表格 (此组件只在v1.0.12或以上版本有效 )
# AsyncTreeGird 概述
支持表格数据异步加载
目前支持编辑类型：文本，文本域，金额，卡号，日期，时间，下拉列表，下拉树，复选框组件。
表格单元格可编辑,可对列配置校验规则进行单个检验
# AsyncTreeGird 代码示例
# 基本用法
最简单的用法，展示基本的树表格。树表格数据为 tree 型数据
# 单选用法
进行单选选择以及校验
# 显示checkbox且父子不联动用法
多项选择
# 显示checkbox且父子联动用法
直接显示编辑框校验
# 异步加载子节点
异步加载子节点，需要在节点 data 中设置 loading 属性及 asyctreegird 组件中设置 load-data 异步加载方法
节点data中设置 expand 自动展开，设置 checked 自动选中
# AsyncTreeGird API
# AsyncTreeGird props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 显示的结构化数据 | Array | [] |
| columns | 表格列的配置描述，具体项见后文 | Array | [] |
| border | 是否显示纵向边框 | Boolean | true |
| show-header | 是否显示表头 | Boolean | true |
| width | 表格宽度，单位 px | Number | String | 自动 |
| height | 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 | Number | String | - |
| disabled-hover | 禁用鼠标悬停时的高亮 | Boolean | false |
| highlight-row | 是否支持高亮选中的行，即单选 | Boolean | false |
| size | 表格尺寸，可选值为 large、small、default 或者不填 | String | - |
| no-data-text | 数据为空时显示的提示内容 | String | 暂无数据 |
| isCheckbox | 是否显示多选框（不可在 column 中同时设置type='selection'） | Boolean | false |
| checkStrictly | 多选模式下多选框是否不联动 | Boolean | false |
| loading | 表格是否加载中 | Boolean | false |
| load-data | 异步加载数据的方法 | Function | -- |
| option | 配置 asycTreeGird 中 type 为 select 的单元格的下拉选项，为 array 类型，其索引配置应和单元格列索引对应，具体见示例 | Array | -- |
| treeOption | 配置asycTreeGird中type为tree的单元格的下拉选项，为array类型，其索引配置应和单元格列索引对应，具体见示例 | Array | -- |
| headSelection | 配置表头全选多选框，只对显示多选框时有效(v1.0.24) | Boolean | false |
| canDrag | 配置列宽可拖动(v1.0.24) | Boolean | false |
| disableEdit | 禁用编辑功能(v1.0.34) | Boolean | false |
| multiLevel | 提供多级表头，其配置项目，具体见后文（此属性只在1.0.39或以上版本有效） | Array | null |
| stripe | 是否显示间隔斑马纹(v1.0.43) | Boolean | false |
| row-class-name | 行的 className 的回调方法，传入参数： row：当前行数据index：当前行的索引 | Function | - |
| lastColWidth | 列宽拖动时有效，表示最后一列在变小时的最小宽度（v1.0.43） | Number | 80 |
| rowSelect | 有多选时是否支持行选中,（v1.0.43） | Boolean | false |
# AsyncTreeGird events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-current-change | 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发 | currentRow：当前高亮行的数据oldCurrentRow：上一次高亮的数据 |
| on-select-change | 在多选模式下有效，只要选中项发生变化时就会触发 | selection：已选项数据row：最后一次操作的数据(包括选择/反选)selection：最后一次操作的数据的index |
| on-expand | 树表格子项展开时触发 | item当前展开节点(Object)status当前父级节点是否展开(Boolean) |
| on-row-click | 单击某一行时触发 | 当前行的数据和 index |
| on-scroll | 表格内纵向滚动条滚动时触发 | 返回当前纵向滚动条距离底部的距离（为0时表示滚动条已经滚动到最底部） |
| on-select-all | headSelection 模式下 表头多选框点击时触发（v1.0.24） | 当前选中状态 |
| on-drag | 表格拖动宽度后触发(v1.0.24) | width当前列宽度key当前列序列 |
| on-row-dblclick | 双击某一行时触发(会触发单次点击事件)(v1.0.43) | 当前行的数据 |
# AsyncTreeGird slot
| 名称 | 说明 |
|---|---|
| header | 表头(配合show-header使用)(此属性只在v1.0.17及以上版本有效) |
| loading | 加载中 |
# AsyncTreeGird method
| 方法名 | 返回值 |
|---|---|
| getTreeSelection | 返回已选中的项(适用于 isCheckbox 为 true 的情况，返回 check 为 true 的已加载节点数据) |
| toggleExpand | this.$refs.XXX.toggleExpand(index,item) 可手动展开行号为 index 的节点，参数 index 为当前节点行号索引(必填),item 为当前节点信息(可选) |
| getAllData | 获取数据(v1.7.0);this.$refs.xxx.getAllData() |
# AsyncTreeGird column
列描述数据对象，是 columns 中的一项
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 列类型，可选值为 index、text、textArea、money、card、select、date、time、selectTree、selection | String | - |
| title | 列头显示文字 | String | # |
| key | 对应列内容的字段名（key关键字不与样式名重叠） | String | - |
| width | 列宽 | Number | - |
| align | 对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐 | String | left |
| ellipsis | 是否开启超出省略(此属性只在v1.0.21及以上的版本有效) | Boolean | false |
| rule | 单元格验证规则 ，如{ required: true, message: XXX }分别表示必填，字段,触发方式默认为 blur | Object | -- |
| hiddenCol | 是否隐藏当前列 | Boolean | false |
| type 为 text 时 | 提供 placeholder，icon 属性字段，参考 input 组件 | -- | -- |
| type 为 textArea 时 | 提供 placeholder，row 属性字段，参考 input 组件 | -- | -- |
| type 为 money 时 | 提供 placeholder，integerNum，suffixNum，bigTips，isround 属性字段，参考 typefield 组件 | -- | -- |
| type为card 时 | 卡号类型不提供属性字段配置，参考 typefield 组件 | -- | -- |
| type 为 select 时 | 提供 option,placeholder，notFoundText 属性字段，参考 select 组件， (option 用法请参照示例)(目前只支持单选用法) | -- | -- |
| type 为 date 时 | 提供 placeholder，editable 属性字段，参考 date组 件， | -- | -- |
| type 为 time 时 | 提供 placeholder，editable,step 属性字段，参考 time 组件， | -- | -- |
| type 为 selectTree 时 | 提供 placeholder，data 属性字段，参考 selectTree 组件，(目前只支持单选用法) （data 为可嵌套的节点属性的数组，生成 tree 的数据），具体用参照示例 | -- | -- |
| hiddenOther | 是否隐藏单元格内原有值(v1.0.27其以上版本支持) | Boolean | false |
| treeNode | 节点收缩展开按钮将显示在第一个设置该属性为 true 的列上(v1.0.43) | Boolean | - |
| showTooltip | 是否鼠标悬浮显示title（仅在配置type为text、number、select、selectTree或不设置type时有效）(v1.7.3) | Boolean | -- |
# AsyncTreeGird data
表格数据对象，data 中除了 columns 中已定义的内容之外，可自定义该数据节点是否展开、异步加载等
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 是否勾选(如果勾选且在父子树节点联动且当前节点为父树节点的情况下，子节点也会全部勾选) | Boolean | false |
| expand | 是否展开直子节点 | Boolean | false |
| children | 子节点属性数组 | Array | - |
| leaf | 叶子节点属性，设置 leaf 后该节点为叶子节点(children,loading 无效) | Boolean | false |
| loading | 设置该节点表示异步加载子节点数据,(为 true 表示正在加载子节点数据，需设置load-data) | Boolean | false |
| autoLoad | 设置该节点可以在初始化时自动加载数据(前提是该节点已经设置loading属性、loadData方法及该节点与其父节点的expand均为true,当节点设置expand为false时不进行自动加载,String类型只能设"true或"false")(此属性只在1.0.9或以上版本有效) | Boolean || String | false |
# multiLevel
列描述数据对象，是 multiLevel 中的一项
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 多级显示文字 | String | # |
| cols | 当前表头所占跨列数 | Number | 1 |
| rows | 当前表头所占跨行数，被跨行单元格右移动 | Number | 1 |
| align | 对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐 | String | left |
| className | 表头单元格样式名 | String | - |
| hiddenCol | 是否隐藏当前表头列 | Boolean | false |