ag-table-vue3
简介：基于 ag-grid 和 vue3 的表格组件
安装
$ yarn add @xmov/ag-table-vue3使用
<template>
<AgTable :table="table" />
</template>
<script lang="ts" setup>
import AgTable, { IAgTable } from '@xmov/ag-table-vue3'
import '@xmov/ag-table-vue3/styles/ag-grid.css'
import '@xmov/ag-table-vue3/styles/ag-theme-alpine.css'
const table: IAgTable = reactive({
loading: false,
tr: [{ headerName: '名称', field: 'name', minWidth: 100 }],
data: []
})
</script>API
Table 属性
| 属性名 | 类型 | 说 明 | 默认值 | 必填 |
|---|---|---|---|---|
tr |
IAgTableTr[] | 表头，详情见 tr 说明 | — | 是 |
data |
LooseObject[] / Ref<LooseObject[]> | 列表数据 | — | 是 |
theme |
ITheme | 主题：alpine-dark / balham-dark / alpine / balham | alpine | 否 |
language |
ILanguage | 语言：zh / en | zh | 否 |
loading |
boolean | 表格是否展示 loading 效果 | false | 是 |
height |
number | 表格总高度，单位 px，不填则自动计算高度 | — | 否 |
headerHeight |
number | 表头高度，单位 px | 36 | 否 |
clientBottom |
number | 底部留白，单位 px | 10 | 否 |
key |
string | 列表唯一索引值的 key，指定 row 中某个属性作索引，指定行高亮需设置 | — | 否 |
hasSelect |
boolean | 是否展示选择项 | false | 否 |
isSelectable |
(params: LooseObject) => boolean | 选择项可选回调 | — | 否 |
suppressFieldDot |
boolean | 是否支持点隔开的 field 属性，false 时可以使用点表示法来引用深层属性值 | true | 否 |
Table 事件
| 事件名 | 回调参数 | 说 明 |
|---|---|---|
row-click |
{ row } | 当某一行被点击时会触发该事件 |
row-dblclick |
{ row } | 当某一行被双击时会触发该事件 |
row-contextmenu |
{ row } | 当某一行被又击时会触发该事件 |
selection-change |
{ source } | 当选择项发生变化时会触发该事件 |
sort-change |
{ source } | 当表格的排序条件发生变化的时候会触发该事件 |
Table 方法
| 方法名 | 参数 | 说 明 |
|---|---|---|
gridApi |
— | 表格的 gridApi 对象，具体参考 ag-grid |
gridColumnApi |
— | 表格的 gridColumnApi 对象，具体参考 ag-grid |
clearSort |
— | 清空表格排序条件 |
clearFilter |
— | 清空表格过滤条件 |
clearRowSelect |
— | 清空表格已选中行 |
setCurrentRow |
id: string | 设置某一行背景高亮，传入目标行的索引 id 值，索引为 table 属性中的 key 设置 |
setHeight |
— | 手动触发表格高度计算 |
Table 插槽
| 插槽名 | 说 明 |
|---|---|
EmptyCellRenderer |
表格数据为空时的自定义的内容 |
LoadingCellRenderer |
表格数据 loading 时的自定义的内容 |
TableTr 属性
| 属性名 | 类型 | 说 明 | 默认值 | 必填 |
|---|---|---|---|---|
field |
string | 列表数据对象 row 的 key 值 | — | 是 |
headerName |
string | 表头名称 | — | 是 |
width |
number | 当前列宽度 | — | 否 |
minWidth |
number | 当前列最小宽度，自适应填充宽度 | — | 否 |
headerTooltip |
string | 表头提示 | — | 否 |
headerClass |
string | 自定义表头样式类 | — | 否 |
cellClass |
string | 自定义表格样式类 | — | 否 |
pinned |
'left' / 'right' | 锁定列以定位到'left' 或者 'right' | — | 否 |
filter |
boolean / IProvidedFilter | 是否展示过滤器 | true | 否 |
hide |
boolean | 此列是否隐藏 | false | 否 |
children |
IAgTableTr[] | 表头合并 | — | 否 |
groupId |
string | 合并表头的 id | — | 否 |
columnGroupShow |
'open' / 'closed' | 设置子列在什么状态下展示 | — | 否 |
menuTabs |
IColumnMenuTab[] | 表头菜单-【企业版】 | — | 否 |
headerCheckboxSelection |
boolean | 表头是否展示 Checkbox | false | 否 |
checkboxSelection |
boolean / (params: LooseObject) => boolean | 表格是否展示 Checkbox | false | 否 |
showDisabledCheckboxes |
boolean | 表格是否展示禁用的 Checkbox | false | 否 |
sortable |
boolean | 此列是否可以排序 | true | 否 |
resizable |
boolean | 此列是否可以修改宽度 | true | 否 |
suppressMovable |
boolean | 此列是否不可通过拖动移动 | false | 否 |
suppressMenu |
boolean | 此列是否不展示 menuTabs 【企业版】 | — | 否 |
cellRenderer |
string | 自定义渲染组件，在插槽中取相同名 | — | 否 |
cellRendererParams |
LooseObject | 自定义渲染组件参数 | — | 否 |
valueFormatter |
(params: LooseObject) => string | 列表值文本过滤器 | — | 否 |
valueGetter |
(params: LooseObject) => any | 列表值转化器，比 valueFormatter 更强大 | — | 否 |
headerValueGetter |
(params: LooseObject) => any | 表头值转换 | — | 否 |