因为该组件功能强大，g-grid几乎能满足你对数据表格所有需求，所以分出一篇文章重点来讲一下常用的而且实用功能，今天打算讲一下他的非常好用的一些技巧，
二话不说放上链接 Ag-grid中文文档：点击进入https://www.ag-grid.com
Ag-grid中文文档：点击进入https://www.itxst.com/ag-grid/tutorial.html

前面我已经介绍了基本的使用，以及常用的属性 ，可以见我上一篇文章 点击进入

 <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>

今天要将的点

1. 汉化 :localeText=“localeText”

我当前的汉化是因为公司需求中英日文需要切换，所以使用了t（全局变量） 没有这个需求的可以自己写为汉字
为什么要有汉化呢，是因为这个软件的一些自带功能都是英文版的
汉化前
汉化后

 List item  // grid汉化  const localeText = { selectAll: t('table.selectAll'), // 全选searchOoo: t('table.searchOoo'), // 搜索blanks: t('table.blanks'), // 空白pinColumn: t('table.pinColumn'), // 固定列pinLeft: t('table.pinLeft'), // 固定到左侧pinRight: t('table.pinRight'), // 固定到右侧noPin: t('table.noPin'), // 取消固定autosizeThiscolumn: t('table.autosizeThiscolumn'), // 自动调整此列宽度autosizeAllColumns: t('table.autosizeAllColumns'), // 自动调整所有列宽度groupBy: t('table.groupBy'), // 按此列分组ungroupBy: t('table.ungroupBy'), // 取消按此列分组resetColumns: t('table.resetColumns'), // 重置列noRowsToShow: t('table.noRowsToShow'), // 无显示行equals: t('table.equals'), // 等于notEqual: t('table.notEqual'), // 不等于lessThan: t('table.lessThan'), // 小于greaterThan: t('table.greaterThan'), // 大于inRange: t('table.inRange'), // 在范围内inRangeStart: t('table.inRangeStart'), // 范围开始inRangeEnd: t('table.inRangeEnd'), // 范围结束andCondition: t('table.andCondition'), // 与条件orCondition: t('table.orCondition'), // 或条件rowGroupColumnsEmptyMessage: t('table.rowGroupColumnsEmptyMessage'), // 无行分组列信息groups: t('table.groups'), // 分组expandAll: t('table.expandAll'), // 全部展开collapseAll: t('table.collapseAll'), // 全部折叠selectedRows: t('table.selectedRows'), // 选中的行totalAndFilteredRows: t('table.totalAndFilteredRows'), // 总行数和过滤行数copy: t('table.copy'), // 复制paste: t('table.paste'), // 粘贴  }

大家根据我的注释也能看出来这些地方需要再哪使用，

2.根据gridView宽度自适应

这个功能是一个非常实用的功能，相信很多小伙伴都遇到这样的问题，使用传统的表格组件，当你的表格表头只有几个，但是你的网页宽度又很大，那么就需要每次都自适应的弹开，然后公司需求还需要根据数据内容进行弹，这个时候传统组件就不能满足我们的需求了。
那么我是怎么利用ag-grid是怎么解决的呢，

需要用到的就是他本身的一个属性 onGridReady 表格初始化完成时触发的事件处理函数
这个函数会在表格初始化的时候触发，然后自带一个属性，params包含网格相关信息和方法的对象
其中最重要的 params.api

params.api 是 Ag-Grid 提供的一个接口，通过这个接口你可以与网格进行各种交互和操作。它包含了一组方法和属性，用于控制和管理网格的数据、视图和行为。

其中具体的使用方法可以查看官网，今天要使用到的是gridApi.value.getColumnDefs()

 const initparams = ref()// 创建一个响应式引用 initparams，用来存储表格初始化时传递的参数对象let setReady// 声明一个变量 setReady，这个变量当前没有被赋值，可能在其他地方被用到const onGridReady = (params) => {  // 表格初始化完成时触发的事件处理函数 onGridReady，接收一个参数 params  initparams.value = params  // 将表格初始化时的参数对象 params 存储在响应式引用 initparams 中，以便在组件其他地方使用  gridApi.value = params.api  // 将表格的 API 接口对象存储在响应式引用 gridApi 中，通过这个接口可以与表格进行各种交互和操作  let obj = JSON.parse(localStorage.getItem('tableHeader')) || {}  // 从 localStorage 中获取存储的表头配置，如果没有则使用空对象 这个用来保存在本地之后方便存储表格的宽度  if (obj[props.gridName] || '') {    // 如果获取到的表头配置中存在当前表格名称的配置，则执行以下操作    let colDefs = gridApi.value.getColumnDefs()    // 获取当前表格的列定义    colDefs.forEach(colDef => {      colDef.maxWidth = undefined      // 遍历每个列定义，将其最大宽度属性设置为 undefined    })    gridApi.value.setColumnDefs(colDefs)    // 将修改后的列定义重新设置到表格中    return false    // 退出函数，不再继续执行后续代码  }  // 根据表格内容自适应  params.columnApi.autoSizeAllColumns(false)  // 调用 columnApi 的 autoSizeAllColumns 方法，根据内容自动调整所有列的宽度  let colDefs = gridApi.value.getColumnDefs()  // 再次获取当前表格的列定义  colDefs.forEach(colDef => {    colDef.maxWidth = undefined    // 遍历每个列定义，将其最大宽度属性设置为 undefined  })  gridApi.value.setColumnDefs(colDefs)  // 将修改后的列定义重新设置到表格中  const tableWidth = document.querySelector(".ag-header-viewport").clientWidth || 1747  // 获取表格头部视口的宽度，如果获取不到则使用默认宽度 1747  const allColumnsWidth = params.columnApi.columnModel.bodyWidth  // 获取所有列的总宽度  if (allColumnsWidth < tableWidth) {    // 如果所有列的总宽度小于表格视口宽度，则执行以下操作    setTimeout(() => {      if (gridApi.value) {        gridApi.value.sizeColumnsToFit()        // 调用 sizeColumnsToFit 方法，根据表格视口宽度自适应调整列宽        if (document.querySelector(".ag-header-cell").clientWidth > 124) {          saveWidth1(params)          // 如果表格头部单元格的宽度大于 124，则调用 saveWidth1 函数保存当前列宽度        }      }    }, 500)    // 使用 setTimeout 延迟 500 毫秒执行以上操作，确保表格完全渲染完成  }}const saveWidth1 = (params) => {  // 定义一个保存列宽度的函数 saveWidth1，接收一个参数 params  let tableHeader = params.columnApi.columnModel.getColumnState().map(item => ({    // 获取当前列状态，并映射成新的对象数组    width: item.width,    prop: item.colId,    // 映射对象中包含列的宽度和列的 ID  }))  let obj = JSON.parse(localStorage.getItem('tableHeader')) || {}  // 从 localStorage 中获取存储的表头配置，如果没有则使用空对象  obj[props.gridName] = tableHeader  // 将当前表格名称的列配置存储到对象中  localStorage.setItem('tableHeader', JSON.stringify(obj))  // 将对象转换成 JSON 字符串并存储到 localStorage 中}

如果需要在浏览器拖动，缩小放大的过程中也进行一个自动自适应可以加入下面这行代码

  window.addEventListener('resize', initTableWidth)	// 表格渲染完成事件  const initTableWidth = () =>{    const a = initparams.value.api      //根据gridView宽度自适应      setTimeout(() => {        if(a){        let obj = JSON.parse(localStorage.getItem('tableHeader')) || {}        if (obj[props.gridName]&&obj[props.gridName][0].label!==props.gridName) {          a.sizeColumnsToFit();            if (document.querySelector(".ag-header-cell").clientWidth>124) {              let tableHeader = initparams.value.columnApi.columnModel.getColumnState().map(item => ({                // label: item.colDef.headerName,                width: item.width,                prop: item.colId,              }))              obj[props.gridName] = tableHeader              localStorage.setItem('tableHeader', JSON.stringify(obj))            }          }          }      }, 500);  }

好了详细的内容已经放在注释里啦，后续我也会添加新内容，喜欢的小伙伴可以点点关注和收藏