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 | 表头值转换 | — | 否 |