ag-table-vue3

简介：基于 ag-grid 和 vue3 的表格组件

安装

1$ yarn add @xmov/ag-table-vue3

使用

1<template>
2  <AgTable :table="table" />
3</template>
4
5<script lang="ts" setup>
6  import AgTable, { IAgTable } from '@xmov/ag-table-vue3'
7  import '@xmov/ag-table-vue3/styles/ag-grid.css'
8  import '@xmov/ag-table-vue3/styles/ag-theme-alpine.css'
9
10  const table: IAgTable = reactive({
11    loading: false,
12    tr: [{ headerName: '名称', field: 'name', minWidth: 100 }],
13    data: []
14  })
15</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	表头值转换	—	否