# editGird 可编辑表格
# editGird 概述
目前支持编辑类型：文本，文本域，金额，卡号，日期，时间，下拉列表，下拉树，复选框组件。
表格单元格可编辑,可对列配置校验规则进行单个检验。
# editGird 代码示例
# 基本用法
最简单的用法，展示基本的编辑类型。
# 单选可编辑可校验
进行单选选择以及编辑校验。
# 多选可编辑可校验
多项选择。
# 直接显示输入框
直接显示编辑和校验。
column.rule 可以是数组或对象，详情见下方示例代码。
# 自定义列模板
通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列（追加到具体项目右侧），包括渲染自定义组件，它基于 Vue 的 Render 函数。
render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、 column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。
📺 学习 Render 函数的内容 (opens new window)
render 函数本质返回的是字符串，h-table 组件在内部对其进行了编译，如果使用了自定义组件，需要特别注意上下文，编译后的自定义组件，默认的上下文是 Table 所在的上下文，如果想让组件在指定的实例下编译，可以给 Table 设置属性 context 来指定上下文，比如本例指定当前路由页为上下文。一般情况不需要此配置，但如果你把 Table 作为一个 slot 封装在其它组件里，这时 context 属性就很有用，比如父级是 $parent，根组件 $root。
# 可展开
当表格内容较多不能一次性完全展示时使用。
通过给 columns 数据设置一项，指定 type: 'expand'，即可开启扩展功能。
给行数据 data 的某项设置 _disableExpand 可以禁用当前行的展开功能。
渲染展开区域与自定义列模板方法类似，使用 render 函数。当内容较复杂时，可拆分为组件或使用 JSX。
📺 学习 Render 函数的内容 (opens new window)
# 可远程搜索
提供 editgird 中 select 组件和 selcttree 组件的下拉数据的外部赋值。
on-expand 展开或收起某一行时触发。
提供 type 为 select 的组件的系列监听监听事件。 详情如下。
# 自定义渲染每行下拉框选项
column 中新增配置项 customOption，传入参数 row，用以自定义渲染每行的下拉框选项。
# 注意事项
数据中的 data 不会随着可编辑表格内数据的化而变化。
getAllData： 通过 this.$refs.xxx.getAllData() 获取 table 内改变后的数据
# editGird API
# editGird props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 显示的结构化数据,额外支持每行数据添加 _disEdit 属性禁止当前行编辑(1.0.60) | Array | [] |
| columns | 表格列的配置描述，具体项见后文 | Array | [] |
| stripe | 是否显示间隔斑马纹 | Boolean | false |
| border | 是否显示纵向边框 | Boolean | true |
| show-header | 是否显示表头 | Boolean | true |
| width | 表格宽度，单位 px | Number | String | 自动 |
| height | 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 | Number | String | - |
| disabled-hover | 禁用鼠标悬停时的高亮 | Boolean | false |
| rowSelect | 多选时是否支持行选中,(仅在type为selection即多选下使用) | Boolean | false |
| highlight-row | 是否支持高亮选中的行，即单选 | Boolean | false |
| size | 表格尺寸 (只修改表头尺寸，行高由itemHeight属性控制)，可选值为 large、small、default 或者不填 | String | - |
| no-data-text | 数据为空时显示的提示内容 | String | 暂无数据 |
| showEditInput | 是否直接显示编辑框 | Boolean | false |
| loading | 表格是否加载中 | Boolean | false |
| option | 配置editgird中type为select的单元格的下拉选项，为array类型，其索引配置应和单元格列索引对应，具体见示例 eg: option配置相中，select下拉选项可配置 disabled 当前选项是否可点击 disabled: 1 表示不能点击 0：表示可以点击 默认不设置表示可点击 注意： 1,0是Number类型 v1.0.81 | Array | -- |
| treeOption | 配置editgird中type为selectTree的单元格的下拉选项，为array类型，其索引配置应和单元格列索引对应，具体见示例 | Array | -- |
| cascaderOption | 配置editgird中type为cascader的单元格的下拉选项，为array类型，其索引配置应和单元格列索引对应(v1.0.45) | Array | -- |
| multiLevel | 提供editgird组件多级表头，不支持冻结列,其配置项目，具体见后文（此属性只在1.0.24或以上版本有效） | Array | null |
| itemHeight | 设置行高（此属性只在1.0.77以上版本有效） | Number | 43 |
| customTrKey | 配置tr绑定的数据，从data内取配置的字段名。 例如data内有个sid字段，配置 customTrKey="sid",表格渲染时tr标签将与这个字段值绑定 | String | - |
| no-filtered-data-text | 筛选数据为空时显示的提示内容 | String | 暂无筛选结果 |
| cellConfig | 用来控制单元格的是否可编辑状态，即控制表单的disabled属性 | Object | cellConfig: { [对应列的key]: { _disabled: true } } |
# editGird data
| 属性 | 说明 | 类型 | 描述 |
|---|---|---|---|
| cellConfig | 用来控制单元格的是否可编辑状态，即控制表单的disabled属性 | Object | cellConfig: { [对应列的key]: { _disabled: true } } |
# editGird events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-current-change | 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发 | currentRow：当前高亮行的数据oldCurrentRow：上一次高亮的数据 |
| on-select | 在多选模式下有效，选中某一项时触发 | selection：已选项数据 row：刚选择的项数据 |
| on-select-cancel | 在多选模式下有效，取消选中某一项时触发 | selection：已选项数据 row：取消选择的项数据 |
| on-select-all | 在多选模式下有效，点击全选时触发 | selection：已选项数据 |
| on-selection-change | 在多选模式下有效，只要选中项发生变化时就会触发 | selection：已选项数据selectionInx：已选项角标（v1.0.30） |
| on-row-click | 单击某一行时触发 | 当前行的数据和index |
| on-scroll | 表格内纵向滚动条滚动时触发 | 返回当前纵向滚动条距离底部的距离（为0时表示滚动条已经滚动到最底部） |
| on-expand | 展开或收起某一行时触发 | row：当前行的数据 status：当前的状态 |
| on-editselect-change | editgird中select组件选择项发生变化时触发（此方法只在1.0.9或以上版本有效） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-editinput-change | editgird中input组件选择项发生变化时触发（此方法只在1.0.9或以上版本有效） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-editinput-enter | editgird中inpu输入框输入enter键时触发（此方法只在1.0.62或以上版本有效） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-editinput-blur | editgird中input组件失去焦点时触发（此方法只在1.0.9或以上版本有效） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-editarea-change | editgird中area组件选择项发生变化时触发（此方法只在1.0.9或以上版本有效） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-editarea-blur | editgird中area组件失去焦点时触发（此方法只在1.0.9或以上版本有效） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-money-change | editgird中money组件选择项发生变化时触发（v1.0.27） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-money-enter | editgird中money组件框输入enter键时触发（此方法只在1.0.62或以上版本有效） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-money-blur | editgird中money组件失去焦点触发（v1.0.27） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-editdate-change | editgird中date组件选择项发生变化时触发（v1.0.33） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
| on-sort-change | 排序时有效，当点击排序时触发(v1.0.40) | column：当前列数据（columns内列数据） key：排序依据的指标 order：排序的顺序，值为 asc 或 desc |
| on-selecttree-change | editgird中selecttree组件选择项发生变化时触发（v1.7.3） | 返回3个参数，分别为当前值，当前项在表格中的横坐标和index |
# editGird methods
| 方法 | 说明 | 参数 |
|---|---|---|
| getChangeData（v1.0.25） | 返回已修改项修改后的数据 | |
| validate（v1.0.39） | showEditInput 模式下校验所有单元格 | callback |
| handleAddData | 从末尾处新增数据(v1.0.67) | this.$refs.xxx.handleAddData(arr); arr:新增数据 |
| handleDelData | 删除数据(v1.0.67) | this.$refs.xxx.handleDelData(_index); _index: 当前行_index |
| handleModifyData | 更新数据(v1.0.67) | this.$refs.xxx.handleModifyData(_index,obj); _index:当前行_index; obj:当前更新数据 |
| getAllData | 更新数据(v1.0.69) | this.$refs.xxx.getAllData(); |
# editGird slot
| 名称 | 说明 |
|---|---|
| loading | 加载中 |
# editGird column
列描述数据对象，是 columns 中的一项
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 列类型，可选值为index、selection、text、textArea、money、card、select、date、time、selectTree或者不设置type，表示不可编辑，若需要显示格式化值请配置render或者可编辑属性+viewValue(1.0.59) | String | - |
| title | 列头显示文字 | String | # |
| key | 对应列内容的字段名（key关键字不与样式名重叠） | String | - |
| fixed | 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧(左右固定时影响option和treeOption的序列，暂不支持)(此属性仅支持1.0.17及其以上版本) | String | - |
| width | 列宽 | Number | - |
| align | 对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐 | String | left |
| sortable | 对应列是否可以排序(v1.0.40) | Boolean | false |
| type为text时 | 提供placeholder，icon,filterRE(v1.0.40)maxlength(v1.0.64)byteNum(v1.0.64)lengthByByte(v1.0.64)属性字段，参考input组件 | -- | -- |
| type为textArea时 | 提供placeholder，row,maxlength,filterRE(v1.0.40)属性字段，参考input组件 | -- | -- |
| type为money时 | 提供placeholder，integerNum，suffixNum，bigTips，isround,nonNegative(v1.0.40),divided(v1.0.40),typefieldAlgin(1.0.59,参考algin字段)属性字段，参考typefield组件,其中divided与immeDivided不可同时配置 | -- | -- |
| type为card时 | 卡号类型不提供属性字段配置，参考typefield组件 | -- | -- |
| type为select时 | 提供 option,placeholder,notFoundText 属性字段，参考 select 组件，(option选项统一在editGrid的option属性中进行配置，具体的用法请参考官网示例)(目前只支持单选用法,1.0.14及其以上版本支持多选)提供 multiple 多选属性[传入值、传出值及显示值均以字符串返回并用','隔开][暂不支持远程多选](此属性仅支持1.0.14及其以上版本)提供 singleShowLabel 属性(Boolean类型)支持当单选时可以直接显示label(此属性仅支持1.0.15及其以上版本)提供 placement,dropWidth 属性（此属性仅支持1.0.17及其以上版本）autoPlacement 属性 (v1.0.41) 提供 allowCreate， filterable、showBottom属性（此属性仅支持1.0.60及其以上版本） 提供 maxlength属性，控制表单输入长度（此属性仅支持1.0.68及其以上版本）提供 transfer属性（Boolean类型），当配置为true时点击可打开select下拉面板。 | -- | -- |
| type为date时 | 提供 placeholder ，editable ，placement，transfer(只支持showEditIput)， autoPlacement(v1.0.41)属性字段，参考date组件， | -- | -- |
| type为time时 | 提供placeholder，editable,step,placement,transfer(只支持showEditIput)属性字段，参考time组件， | -- | -- |
| type为selectTree时 | 提供placeholder，data属性字段，参考selectTree组件，(目前只支持单选用法)（data为可嵌套的节点属性的数组，生成 tree的数据），具体用参照示例 | -- | -- |
| type为cascader时 | 提供placeholder，renderFormat,transfer，trigger,multiple属性字段，参考cascader组件，(v1.0.45) 提供 showLable 属性(Boolean类型)，为true时，显示内容为label（xxx/xxxx）(v1.5.1) | -- | -- |
| type为expand时 | 通过render加载另一个组件，出现在下拉里面，如上述例子所示 | -- | -- |
| render | 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是h，第二个为对象，包含 row、column 和index，分别指当前行数据，当前列数据，当前行索引。(当render和type都存在时，render为追加添加，只设置render时，render直接显示) | Function | - |
| typeWidth | 当render和type都存在时，设置type类型的显示宽度（默认宽度为70%,） | Number | -- |
| rearlabel | 设置当前列后置单位（此属性只在v1.0.24及以上版本有效） | Function | (index)=>{}参数index |
| prelabel | 设置当前列前置单位（此属性只在v1.0.24及以上版本有效） | Function | (index)=>{}参数index |
| hiddenOther | 是否隐藏单元格内原有值(v1.0.26其以上版本支持) | Boolean | false |
| ellipsis | 当前单元格是否不换行(v1.0.28) | Boolean | false |
| viewValue | 当前单元格是否不可编辑(仅在配置type为select、money等可编辑属性时，当前单元格不可点击进行编辑，例如type为select且配置showSingleLabel时，显示格式化后值)(v1.0.59) | Boolean | false |
| html | 是否以html进行渲染，例如会将< a >渲染成a标签，默认以文本形式渲染(v1.0.64) | Boolean | false |
| filters | 过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置filterMethod（用法参考table） | Array | -- |
| filterMethod | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示（用法参考table） | Function | -- |
| filterMultiple | 数据过滤的选项是否多选（用法参考table） | Boolean | true |
| filteredValue | 筛选项的初始值，是filters中由label组成的数组（用法参考table） | Array | -- |
| customOption | 用以自定义渲染每行的下拉选项值，传入参数row，是每行的行数据，该函数最终要return一个数组，该数组是用于渲染当前行下拉框的下拉选项 (v1.089) | Function | -- |
| showTooltip | 是否鼠标悬浮显示title（仅在配置type为text、number、select、selectTree或不设置type时有效）(v1.6.0) | Boolean | -- |
# multiLevel (v1.0.24及其以上版本支持)
列描述数据对象，是 multiLevel 中的一项
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 多级显示文字 | String | # |
| cols | 当前表头所占跨列数 | Number | 1 |
| rows | 当前表头所占跨行数，被跨行单元格右移动（v1.0.24） | Number | 1 |
| align | 对齐方式，可选值为 left 左对齐、 right 右对齐和 center 居中对齐 | String | left |
| className | 表头单元格样式名 | String | - |
| hiddenCol | 是否隐藏当前表头列 | Boolean | false |