0.0.19 • Published 8 months ago
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 | 表头值转换 | — | 否 |