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，这个变量当前没有被赋值，可能在其他地方被用到

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);
  }

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