AgGridVue 一款强大的表格组件（2）

因为该组件功能强大，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 提供的一个接口，通过这个接口你可以与网格进行各种交互和操作。它包含了一组方法和属性，用于控制和管理网格的数据、视图和行为

。
方法作用params.api.getColumnDefs()用于获取当前表格的列定义。它返回一个包含所有列定义的数组。这在需要动态访问或修改列定义时非常有用params.api.setRowData(myRowData)设置或更新网格的数据params.api.updateRowData({ add: newItems });更新网格中的数据，例如添加、更新或删除行params.api.refreshCells({ force: true });刷新网格的单元格。params.api.redrawRows();重新绘制指定的行params.api.getSelectedRows()获取选中的行数据params.api.selectAll()选择所有行params.api.sizeColumnsToFit();调整列宽度以适应网格宽度params.api.paginationGoToNextPage()跳转到下一页params.api.deselectAll();取消选择所有行
其中具体的使用方法可以查看官网，今天要使用到的是

gridApi.value.getColumnDefs()

const initparams =ref()// 创建一个响应式引用 initparams，用来存储表格初始化时传递的参数对象let setReady
// 声明一个变量 setReady，这个变量当前没有被赋值，可能在其他地方被用到constonGridReady=(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)// 将修改后的列定义重新设置到表格中returnfalse// 退出函数，不再继续执行后续代码}// 根据表格内容自适应
  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// 获取表格头部视口的宽度，如果获取不到则使用默认宽度 1747const 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 毫秒执行以上操作，确保表格完全渲染完成}}constsaveWidth1=(params)=>{// 定义一个保存列宽度的函数 saveWidth1，接收一个参数 paramslet 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)// 表格渲染完成事件constinitTableWidth=()=>{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);}

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