Gitee
Appearance
Data Grid 表格
Data Grid 是展示数据的表格组件，提供分页展示数据，在单元格中编辑数据的功能。
基本用法
禁用
尺寸
行号
分页
按钮操作列
自定义行列
单元格模板
合计行
固定列
表头分组
数据分组
启用选择行
勾选复选框选择行
多选模式
设置选中数据
显示全选
显示边框
显示配置按钮
显示滚动条
显示条纹
行编辑
单元格编辑
绑定数据
设置列
自适应列宽
加载中
空数据
增加和删除操作
选中和取消选中行操作
DataGrid
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | array | -- | 绑定的数据源 |
| columns | array<DataGridColumn> | -- | 列集合 |
| disabled | boolean | false | 禁用 |
| editable | boolean | false | 允许编辑 |
| fit | boolean | false | 适配父组件尺寸 |
| height | number | - | 高度 |
| width | number | - | 宽度 |
| minHeight | number | 300 | 最小高度 |
| minWidth | number | 400 | 最小宽度 |
| idField | string | id | 行记录的标识属性名 |
| mergeCell | boolean | 400 | 纵向合并具有相同值的单元格 |
| showFooter | boolean | false | 显示底部面板 |
| showHeader | boolean | true | 显示顶部面板 |
| showScrollBar | boolean | auto | 显示滚动条 |
| showSetting | boolean | false | 显示列设置按钮 |
| showBorder | boolean | false | 显示边框 |
| showStripe | boolean | false | 显示条纹，也叫斑马线样式 |
| virtualized | boolean | true | 启用虚拟渲染 |
| columnOption | ColumnOptions | {fitColumns: false,fitMode: 'none'} | 列布局配置 |
| commandOption | CommandOptions | {enable: false,commands: []} | 列配置 |
| editOption | EditOptions | { selectOnEditing: false, editMode:'cell' } | 编辑配置 |
| pagination | PaginatonOptions | {enable:false,size:20} | 分页配置 |
| rowNumber | RowNumberOptions | {enable: true,width: 32,heading:'序号'} | 行号配置 |
| rowOption | RowOptions | {wrapContent: false} | 行配置 |
| selection | SelectionOptions | {enableSelectRow: true,multiSelect: false,multiSelectMode: 'DependOnCheck',showCheckbox: false,showSelectAll: false,showSelection: true} | 选中行配置 |
| summary | SummaryOptions | {enable: true, \ groupFields: ['numericField1', 'numericField2']} | 合计配置 |
| group | GroupOptions | {enable: false, groupFields: [],showGroupPanel: false, showSummary: false} | 数据分组 |
DataGridColumn
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| dataType | string | string | 数据类型 |
| editor | EditorConfig | {type: 'input-group'} | 编辑器配置 |
| field | string | -- | 列标识 |
| title | string | -- | 列标题 |
| width | number,string | 120 | 列宽度 |
| align | string | left | 文本水平对齐方式，分为left,center,right三种 |
| valign | string | top | 文本垂直对齐方式，分为top,middle,bottom三种 |
| fixed | string | false | 是否固定列，分为left和right两种 |
| visible | boolean | true | 是否显示 |
| readonly | boolean | false | 是否只读 |
| showTips | boolean | false | 鼠标移动至单元格后，显示悬浮消息 |
| tipMode | string | auto | 单元格提示模式：allways： 鼠标滑过即显示, auto: 单元格宽度不够时才会显示 |
| sortable | boolean | false | 是否排序 |
| resizable | boolean | true | 是否伸缩 |
| filterable | boolean | false | 是否筛选 |
| formatter(cell: VisualDataCell, visualDataRow: VisualData) | function | 无默认值，可选属性 | 格式化函数,函数返回值为VNode 或者string类型 |
PaginatonOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enable | boolean | false | 启用分页 |
| index | number | 1 | 当前页码 |
| mode | string | 'server' | 分页模式,'server'和'client'两种 |
| showGoto | boolean | false | 显示页码输入框 |
| showIndex | boolean | true | 显示页码 |
| showLimits | boolean | false | 显示每页记录数 |
| showPageInfo | boolean | false | 显示分页汇总信息 |
| size | number | 20 | 默认每页记录数 |
| sizeLimits | array<number> | [10, 20, 30, 50, 100] | 可选择的每页记录数据 |
| total | number | 0 | 总记录数 |
RowOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| customRowStyle(data:any) | function | 空函数 | 自定义行样式函数，参数为行数据 |
| height | boolean | 28 | 行高度 |
| showHovering | boolean | true | 鼠标滑过行效果 |
| wrapContent | boolean | false | 禁止数据折行 |
ColumnOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| fitColumns | boolean | false | 自动列宽。设为true后，所有列将填满表格并不会出现横向滚动条。 |
| fitMode | string | average | 自动适配列宽度模式,'none'或'average'或'expand'或'percentage' |
| groups | array<ColumnGroupItem> | [] | 分组, ColumnGroupItem结构是field（列标识）,title（标题）和group（ColumnGroupItem结构） |
| reorderColumn | boolean | false | 允许拖动表头改变列显示顺序 |
| resizeColumnOnDoubleClick | boolean | true | 双击表头列自适应内容宽度 |
SelectionOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| checkOnSelect | boolean | false | 用多选且显示checkbox, 选中行后勾选前面的checkbox |
| clearSelectionOnEmpty | boolean | true | 当数据源为空时，清空已选记录 |
| keepSelectingOnClick | boolean | true | 允许重复点击行是保留选中状态 |
| keepSelectingOnPaging | boolean | true | 允许跨页多选 |
| selectOnCheck | boolean | false | 启用多选且显示checkbox, 勾选后并且选中行 |
| enableSelectRow | boolean | true | 允许选中行 |
| multiSelect | boolean | false | 启用多选 |
| showCheckbox | boolean | false | 每行前边显示复选框 |
| showSelectAll | boolean | false | 显示全选复选框 |
SummaryOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enable | boolean | false | 启用合计行 |
| customSummaryStyle | function | () => {} | 合计行自定义样式，对启用合计行模板无效 |
| groupFields | array<string> | [] | 分组合计字段 |
| mode | string | client | 合计交互模式，可以选择client和server两个值 |
| position | string | false | 合计行显示位置，可以选择bottom、top和both三个值 |
CommandOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enable | boolean | false | 启用操作列 |
| commands | array<ColumnCommand> | - | 操作列命令集合 |
ColumnCommand
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string | - | 类型，与button组件type一致 |
| text | string | - | 名称 |
| command | string | - | 四种类型，编辑（edit）、删除（remove）、确定（accept）、取消（cancel） |
| hidden | boolean | false | 是否隐藏 |
| icon | string | - | 图标类选择器名称， 如f-icon |
| onClick | function | - | 触发事件 |
RowNumberOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enable | boolean | false | 启用行号 |
| heading | string | 序号 | 双击行事件 |
| width | number | 36 | 行号宽度 |
EditOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selectOnEditing | boolean | false | 编辑时选中文本 |
| editMode | string | cell | 单元格编辑cell或者行编辑row |
GroupOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enable | boolean | false | 启用数据分组 |
| groupFields | array<string> | [] | 行数据分组字段；多字段分组以英文逗号分隔 |
| showGroupedColumn | boolean | true | 在DataGrid中显示被分组的列 |
| showGroupPanel | boolean | false | 显示分组面板 |
| showSummary | boolean | false | 启用合计行 |
| summaryPosition | string | [] | 显示合计行位置,可以选择separate和merge-to-group两个方式 |
| customSummaryStyle | function | () => {} | 自行分组合计行样式 |
| customGroupRowStyle | function | () => {} | 自定义分组行样式 |
| customGroupRow | function | () => {} | 自定义分组合计内容 |
DataGrid Event
| 事件名 | 参数 | 说明 |
|---|---|---|
| click-row | Function(index,dataItem) | 点击行事件 |
| double-click-row | Function(index,dataItem) | 双击行事件 |
| selection-change | Function(selectedItems) | 勾选事件 |
| enter-up-in-last-cell | Function() | 进入最后一个单元格事件 |
| page-index-changed | Function(newPageIndex) | 页码切换事件 |
| page-size-changed | Function(newPageSize) | 每页数量切换事件 |
DataGrid API
有些场景下，需要主动触发组件API来实现数据或模板的更新，比如更新数据、更新列对象等，以下是data grid组件实例的方法
| 方法名 | 参数 | 说明 |
|---|---|---|
| updateDataSource | data: Record<string, any>[] | 更新数据 |
| updateColumns | columns: DataColumn[] | 更新列 |
| selectItemByIds | dataItemIds: string[] | 选中行 |
| unSelectItemByIds | dataItemIds: string[] | 取消选中行 |
| clearSelection | 无 | 清空选中行 |
| updatePagination | pageOptions: Partial<PaginatonOptions> | 更新分页信息，多用于服务端分页 |
| endEditCell | 无 | 结束单元格编辑 |
| editDataItem | visualDataRow: VisualData | 编辑行 |
| removeDataItem | dataIndex: number | 根据索引删除行 |
| removeDataItemById | dataItemId: string | 根据标识删除行 |
插槽
TIP
暂无内容