likes
comments
collection
share

啊，你还在找一款强大的表格组件吗？书接上回《前端大量数据层级展示及搜索定位预览》，在做数据预览的时候查找了一些表格组件，

作者站长头像
站长
· 阅读数 42

其实国内也有很多优秀的表格组件，下面这两个也都支持虚拟滚动、懒加载、自定义列操作等等。

安装依赖

如果你只想使用简单的表格预览功能，我们直接安装下面这些依赖就行

npm install ag-grid-vue3

如果你想使用侧边工具栏我们就需要安装付费的库（这里也可以直接下载使用，但是有水印和控制台警告）

npm install @ag-grid-community/client-side-row-model @ag-grid-community/core @ag-grid-enterprise/column-tool-panel ag-grid-enterprise

样式使用

ag-grid内置了很多套主题，我们在使用的时候需要进行单独导入，比如我们使用ag-theme-alpine主题(tips: 我们在项目中使用ag-theme-quartz主题导入样式后很多css变量不生效，所以换成了ag-theme-alpine)。

import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";

然后还需要在对应的ag-grid-vue组件中设置对应的主题class，例如

<ag-grid-vue
  v-show="!props.isTableLoading && csvData.groupCsvData.length"
  class="ag-theme-alpine"
  :rowData="csvData.groupCsvData"
  :columnDefs="csvData.fields"
  :loading="props.isTableLoading"
  :gridOptions="gridOptions"
  ref="agGridRef"
>
</ag-grid-vue>

语言

ag-grid默认是美式英文展示，我们如果使用到大量的功能，那么直接安装对应的语言包即可。如果使用的功能比较少，直接进行对应的属性设置即可。

安装语言包

npm install @ag-grid-community/locale

导入语言包

import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';

使用

<ag-grid-vue 
    :localeText="AG_GRID_LOCALE_CN" 
    /* other grid options ... */
> 
</ag-grid-vue>

如果简单的想替换一些描述请查找这里。在该项目中我是自己翻译了一些属性语言直接定义，没有安装语言包。

const localeText = {
  columns: "设 置 列",
  pinColumn: "固定此列",
  pinLeft: "固定到左侧",
  pinRight: "固定到右侧",
  noPin: "不固定",
  autosizeThiscolumn: "自适应此列",
  autosizeAllColumns: "自适应全部列",
  resetColumns: "重置全部列",
  searchOoo: "过滤",
  noRowsToShow: "暂无数据",
  copy: "复制",
};

定义所有列设置(defaultColDef)或单列设置

有哪些具体的属性可以看这里

这些属性在defaultColDef设置是对所有列都生效的，比如suppressColumnsToolPanel: true, 那么所有列都不在列工具面板中显示。

啊，你还在找一款强大的表格组件吗？书接上回《前端大量数据层级展示及搜索定位预览》，在做数据预览的时候查找了一些表格组件，

下面介绍一些常用内容

  • contextMenuItems(内置菜单项)：设置单元格操作菜单项。
  • mainMenuItems: 设置表头菜单项（非tab分类）。为了更好的去控制，我们会在组件/gridOptions中getMainMenuItems属性动态决定设置哪些菜单项。
const getMainMenuItems = (params) => {
  return [
    ...params.defaultItems.filter((item) => item !== 'columnFilter'),
    'separator',
    {
        name: 'Filter',
        menuItem: 'MenuItem', // 自定义组件
        menuItemParams: {
            column: params.column,
        },
    },
  ];
};

啊，你还在找一款强大的表格组件吗？书接上回《前端大量数据层级展示及搜索定位预览》，在做数据预览的时候查找了一些表格组件，

  • menuTabs：表头列菜单项（分类）。('filterMenuTab' | 'generalMenuTab' | 'columnsMenuTab') 啊，你还在找一款强大的表格组件吗？书接上回《前端大量数据层级展示及搜索定位预览》，在做数据预览的时候查找了一些表格组件，
  • suppressMovable: 禁止拖动列(一般设置在某个列配置中，不会设置在全局)。
  • lockPosition: 锁定该列，设置left, right后，其他列都能进行拖动到其前或者其后，他不同于pinned，并且设置了lockPosition就不要设置`pinne否则否则不生效。
  • suppressHeaderMenuButton： 隐藏表头列菜单。
  • suppressHeaderContextMenu: 右键不显示表头列菜单。
  • sortable：默认开启行排序，如果设置false表示关闭。
  • tooltipValueGetter: 单元格引入提示内容自定义。
  • cellRenderer: 自定义单元格渲染内容。(例如搜索数据后端返回的是html文本，我们就需要在这里进行处理)。
  • columnMenu: 列菜单的显示类型(new默认，一次性显示，使用mainMenuItems进行配置, legacytab切换显示，使用menuTabs进行配置)
  • suppressContextMenu: 设置为true表示关闭上下文(单元格)菜单。(右键)
const defaultColDef: ColDef = {
  flex: 1,
  minWidth: 150,
  sortable: false,
  menuTabs: ["generalMenuTab"], // 菜单面板
  suppressHeaderFilterButton: true,
  suppressHeaderContextMenu: true,
};

columnTypes，自定义列type，主要是用于多个列(复用)。

列和数据的映射相关字段和其他表格组件大差不差，可以参考开发文档进行配置。由于column props内容过多，用到那些功能去查文档即可。Vue Grid: Column Options Reference | AG Grid (ag-grid.com)

侧边操作栏

这里我们就使用列隐藏和拖拽(列操作),所以下面就介绍一下。首先我们需要注册其side功能组件。

import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
import { ColumnsToolPanelModule } from "@ag-grid-enterprise/column-tool-panel";
import { ModuleRegistry } from "@ag-grid-community/core";

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
]);

然后就是定义侧边栏具体的内容。

const sideBar = {
  toolPanels: [
    {
      id: "columns",
      labelDefault: "设置列",
      labelKey: "columns",
      iconKey: "columns",
      toolPanel: "agColumnsToolPanel",
      hidden: true,
    },
  ],
  defaultToolPanel: "",
};

默认内置了列操作(显示/隐藏/重新排序列、对行进行分组和聚合数据，以及执行枢轴操作)(Columns Tool Panel)和过滤侧边栏(Filters Tool Panel)。ag-grid也提供了自定义侧边栏的功能(Vue Grid: Tool Panel Component | AG Grid (ag-grid.com))

一般我们使用侧边栏工具都是自定义配置，不会直接使用sideBar的默认配置。

  const sideBar = {
    toolPanels: [
        {
            id: 'columns',
            labelDefault: 'Columns', // tab默认展示的名称
            labelKey: 'columns', // 本地化获取的键值
            iconKey: 'columns', // 图标名称
            toolPanel: 'agColumnsToolPanel', // 自定义面板的组件，默认是agColumnsToolPanel
            toolPanelParams: {}, // 自定义面板组件传递的参数。这个也可给agColumnsToolPanel组件传递参数
            minWidth: 225,
            maxWidth: 225,
            width: 225
        },
        {
            id: 'filters',
            labelDefault: 'Filters',
            labelKey: 'filters',
            iconKey: 'filter',
            toolPanel: 'agFiltersToolPanel',
            minWidth: 180,
            maxWidth: 400,
            width: 250
        }
    ],
    position: 'left', // 侧边栏呈现的位置
    hiddenByDefault: true, // 是否展示侧边栏条
    defaultToolPanel: 'filters' // 指定默认展开的面板id。不指定就默认不展开面板
  };

侧边栏相关方法都是通过agGridRef.api实例去调用执行的，那就是逻辑层面的操作了，就不是配置层面的了。Vue Grid: Side Bar | AG Grid (ag-grid.com)

还有就是对内置组件agColumnsToolPanel, agFiltersToolPanel进行特定的配置了（通过toolPanelParams进行配置参数传递）。注意这里设置的配置不会影响到表格中的操作，但是表格中配置的列操作会影响到这个侧边栏。

菜单

表头菜单

啊，你还在找一款强大的表格组件吗？书接上回《前端大量数据层级展示及搜索定位预览》，在做数据预览的时候查找了一些表格组件， 表头菜单是否显示主要和列配置有关。

  • suppressHeaderMenuButton, 设置为true不显示菜单按钮。
  • suppressHeaderFilterButton, 设置为true表示不在列标题中显示筛选按钮。当columnMenu = 'legacy'时不适用。
  • suppressHeaderContextMenu, 设置为true表示右键单击列标题时不显示列菜单。当columnMenu = 'legacy'时不适用。
  • suppressMenuHide, 设置为true时将始终显示列菜单按钮。当为false时，列菜单按钮只会在鼠标位于列标题上时显示。如果columnMenu = 'legacy'，这将默认为false而不是true。

这里可查看默认的内置菜单项Vue Grid: Column Menu | AG Grid (ag-grid.com)

单元格菜单

就是右键单元格（数据）时出现的菜单。

啊，你还在找一款强大的表格组件吗？书接上回《前端大量数据层级展示及搜索定位预览》，在做数据预览的时候查找了一些表格组件，

默认内置菜单项可以查看这里 Vue Grid: Context Menu | AG Grid (ag-grid.com)。

如果单元格出现时有遮挡不方便操作，我们可以将单元格菜单父元素设置成body，使用popupParent属性。他是一个组件属性。表头菜单也可以设置。

以上就是ag-grid组件的一些入门配置。具体相关api用到时可以查询官方文档，很详细的。

往期年度总结

往期文章

专栏文章

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，    支持一下博主~

公众号：全栈追逐者，不定期的更新内容，关注不错过哦！

转载自:https://juejin.cn/post/7410625892031414298
评论
请登录