AgGridVue 一款强大的表格组件

今天讲一个特别强大的组件 - AgGridVue

文档链接带点击进入https://www.ag-grid.com
可以看一下官网的演示，是一款功能非常强大的表格组件，
为什么我会说是一个非常强大的组件呢，很多人就会问了，我使用elementplus里的表格组件那不是一样的吗，哎nonono，
AgGridVue适用于各种数据密集型应用,尤其适合以下场景: 数据分析应用:通过提供强大的排序、过滤和聚合功能，
能够处理大规模数据集，支持虚拟滚动和高效的数据处理，从而提供平滑的用户体验，即使在处理大量数据时也能保持快速响应。
用人话来说就是特别特别多的数据用他来展示不会卡，满足特别特别多的筛选条件，能够完成特别特别多的功能，像是本人公司的项目少则五千条数据，多则十万条，光筛选条件就有俩百多个，没有一款强大的组件怎么能行呢，话不多说往下看

使用方法

先简单讲一下使用步骤，官网有这里只是粘贴复制

1. NPM 安装

npm install ag-grid-vue3

2.导入Vue数据网格

 <template></template>

<script>
import { ref } from 'vue';
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the Data Grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the Data Grid
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component

export default {
 name: "App",
 components: {
   AgGridVue, // Add Vue Data Grid component
 },
 setup() {},
};
</script>

3. 定义行和列

setup() {
 // Row Data: The data to be displayed.
 const rowData = ref([
   { make: "Tesla", model: "Model Y", price: 64950, electric: true },
   { make: "Ford", model: "F-Series", price: 33850, electric: false },
   { make: "Toyota", model: "Corolla", price: 29600, electric: false },
 ]);

 // Column Definitions: Defines the columns to be displayed.
 const colDefs = ref([
   { field: "make" },
   { field: "model" },
   { field: "price" },
   { field: "electric" }
 ]);

 return {
   rowData,
   colDefs,
 };
},

上面就使用一个简单的使用，组件可以实现的功能有很多，我具体讲一下我项目中使用到的功能

 <AgGridVue
      :style="'width:100%;height:' + props.height + 'px'"//设置表格的内联样式，宽度为100%，高度根据props.height的值动态设置
      class="ag-theme-alpine" //使用ag-theme-alpine CSS类为表格应用Alpine主题样式。
      :class="activeClass.join(' ')"//动态绑定附加的CSS类到表格上，类名由activeClass数组中的值组成。
      :columnDefs="columns"//定义表格的列配置（如标题、排序、过滤等），使用columns对象。
      :rowData="gridData"//提供表格显示的数据，使用gridData数组。
      rowSelection="multiple"//允许选择多行。
      @grid-ready="onGridReady"//表格初始化完成时触发的事件处理函数。
      :rowDeselection="true"//允许点击已选择的行来取消选择。
      :enableRangeSelection="true"//启用选择一系列单元格或行的功能。

      :suppressCopyRowsToClipboard="true"//防止将行数据复制到剪贴板。
      :statusBar="{
        // statusPanels: [
        //   // { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' },
        //   // { statusPanel: 'agSelectedRowCountComponent', align: 'left' }
        // ],
      }" //配置表格的状态栏。在你的代码中被注释掉了，但可以用于显示各种状态面板。
      :gridOptions="props.gridOptions"//从props.gridOptions中传递额外的表格选项，以进行自定义配置。
      :getContextMenuItems="getContextMenuItems"//提供一个函数来自定义右键菜单项。
      @sortChanged="refreshEvenRowsCurrencyData"//排序发生变化时触发的事件处理函数，用于根据新的排序顺序刷新数据。
      @filterChanged="refreshEvenRowsCurrencyData"//过滤条件发生变化时触发的事件处理函数，用于根据新的过滤条件刷新数据。
      @rowClicked="props.rowClick"//行被点击时触发的事件处理函数，用于执行自定义函数。
      @rowDoubleClicked="props.rowDoubleClicked"//行被双击时触发的事件处理函数，用于执行自定义函数。
      animateRows //启用行动画，用于行数据的添加或删除时的视觉效果。
      :suppressDragLeaveHidesColumns="true" //防止在将列拖动到表格外部时列被隐藏。
      :suppressMakeColumnVisibleAfterUnGroup="true" //防止在取消分组后自动显示列。
      :rowGroupPanelShow="props.autoGroupColumnDef ? 'always' : false" //控制行分组面板的显示。如果props.autoGroupColumnDef被设置，则总是显示；否则，隐藏。
      :groupSelectsChildren="true" //选择一个分组行时，所有其子行也会被选中。
      :suppressAggFuncInHeader="true" //防止在列头显示聚合函数。
      :autoGroupColumnDef="autoGroupColumnDef" //定义自动分组列的配置，用于数据分组。
      :masterDetail="true" //启用主从详细视图，允许在行中显示嵌套的详细信息。
      :localeText="localeText" //提供表格的本地化文本，基于localeText。
      :rowHeight="props.rowHeight" //根据props.rowHeight设置行的高度。
      @column-moved="onColumnMoved" //列移动时触发的事件处理函数，用于执行自定义函数。
      @column-resized="onColumnResized" //列大小调整时触发的事件处理函数，用于执行自定义函数。
      :suppressColumnVirtualisation="true" //禁用列虚拟化，这会影响性能，因为它会一次性渲染所有列，而不是仅渲染可见的列。
      :pinnedBottomRowData="pinnedBottomRowData" //将一组固定的数据行固定在表格的底部。这个属性接受一个数组，其中包含要固定在表格底部的行数据。
    >
    </AgGridVue>

我们会经常用到的属性以及方法我已经注释表明了，由于内容过多，我会每天更新去维护这篇文章，喜欢的小伙伴可以点赞收藏一下，