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

因为该组件功能强大，g-grid几乎能满足你对数据表格所有需求，所以分出一篇文章重点来讲一下常用的而且实勤奋能，今天操持讲一下他的非常好用的一些技巧，
二话不说放上链接 Ag-grid中文文档：点击进入https://www.ag-grid.com
Ag-grid中文文档：点击进入https://www.itxst.com/ag-grid/tutorial.html
前面我已经介绍了基本的利用，以及常用的属性 ，可以见我上一篇文章 点击进入

1. <AgGridVue
2.       :style="'width:100%;height:' + props.height + 'px'"//设置表格的内联样式，宽度为100%，高度根据props.height的值动态设置
3.       class="ag-theme-alpine" //使用ag-theme-alpine CSS类为表格应用Alpine主题样式。
4.       :class="activeClass.join(' ')"//动态绑定附加的CSS类到表格上，类名由activeClass数组中的值组成。
5.       :columnDefs="columns"//定义表格的列配置（如标题、排序、过滤等），使用columns对象。
6.       :rowData="gridData"//提供表格显示的数据，使用gridData数组。
7.       rowSelection="multiple"//允许选择多行。
8.       @grid-ready="onGridReady"//表格初始化完成时触发的事件处理函数。
9.       :rowDeselection="true"//允许点击已选择的行来取消选择。
10.       :enableRangeSelection="true"//启用选择一系列单元格或行的功能。
12.       :suppressCopyRowsToClipboard="true"//防止将行数据复制到剪贴板。
13.       :statusBar="{
14.         // statusPanels: [
15.         //   // { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' },
16.         //   // { statusPanel: 'agSelectedRowCountComponent', align: 'left' }
17.         // ],
18.       }" //配置表格的状态栏。在你的代码中被注释掉了，但可以用于显示各种状态面板。
19.       :gridOptions="props.gridOptions"//从props.gridOptions中传递额外的表格选项，以进行自定义配置。
20.       :getContextMenuItems="getContextMenuItems"//提供一个函数来自定义右键菜单项。
21.       @sortChanged="refreshEvenRowsCurrencyData"//排序发生变化时触发的事件处理函数，用于根据新的排序顺序刷新数据。
22.       @filterChanged="refreshEvenRowsCurrencyData"//过滤条件发生变化时触发的事件处理函数，用于根据新的过滤条件刷新数据。
23.       @rowClicked="props.rowClick"//行被点击时触发的事件处理函数，用于执行自定义函数。
24.       @rowDoubleClicked="props.rowDoubleClicked"//行被双击时触发的事件处理函数，用于执行自定义函数。
25.       animateRows //启用行动画，用于行数据的添加或删除时的视觉效果。
26.       :suppressDragLeaveHidesColumns="true" //防止在将列拖动到表格外部时列被隐藏。
27.       :suppressMakeColumnVisibleAfterUnGroup="true" //防止在取消分组后自动显示列。
28.       :rowGroupPanelShow="props.autoGroupColumnDef ? 'always' : false" //控制行分组面板的显示。如果props.autoGroupColumnDef被设置，则总是显示；否则，隐藏。
29.       :groupSelectsChildren="true" //选择一个分组行时，所有其子行也会被选中。
30.       :suppressAggFuncInHeader="true" //防止在列头显示聚合函数。
31.       :autoGroupColumnDef="autoGroupColumnDef" //定义自动分组列的配置，用于数据分组。
32.       :masterDetail="true" //启用主从详细视图，允许在行中显示嵌套的详细信息。
33.       :localeText="localeText" //提供表格的本地化文本，基于localeText。
34.       :rowHeight="props.rowHeight" //根据props.rowHeight设置行的高度。
35.       @column-moved="onColumnMoved" //列移动时触发的事件处理函数，用于执行自定义函数。
36.       @column-resized="onColumnResized" //列大小调整时触发的事件处理函数，用于执行自定义函数。
37.       :suppressColumnVirtualisation="true" //禁用列虚拟化，这会影响性能，因为它会一次性渲染所有列，而不是仅渲染可见的列。
38.       :pinnedBottomRowData="pinnedBottomRowData" //将一组固定的数据行固定在表格的底部。这个属性接受一个数组，其中包含要固定在表格底部的行数据。
39.     >
40.     </AgGridVue>

复制代码

今天要将的点
1. 汉化 :localeText=“localeText”

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

汉化后

1. List item
2.   // grid汉化
3.   const localeText = {
4. selectAll: t('table.selectAll'), // 全选
5. searchOoo: t('table.searchOoo'), // 搜索
6. blanks: t('table.blanks'), // 空白
7. pinColumn: t('table.pinColumn'), // 固定列
8. pinLeft: t('table.pinLeft'), // 固定到左侧
9. pinRight: t('table.pinRight'), // 固定到右侧
10. noPin: t('table.noPin'), // 取消固定
11. autosizeThiscolumn: t('table.autosizeThiscolumn'), // 自动调整此列宽度
12. autosizeAllColumns: t('table.autosizeAllColumns'), // 自动调整所有列宽度
13. groupBy: t('table.groupBy'), // 按此列分组
14. ungroupBy: t('table.ungroupBy'), // 取消按此列分组
15. resetColumns: t('table.resetColumns'), // 重置列
16. noRowsToShow: t('table.noRowsToShow'), // 无显示行
17. equals: t('table.equals'), // 等于
18. notEqual: t('table.notEqual'), // 不等于
19. lessThan: t('table.lessThan'), // 小于
20. greaterThan: t('table.greaterThan'), // 大于
21. inRange: t('table.inRange'), // 在范围内
22. inRangeStart: t('table.inRangeStart'), // 范围开始
23. inRangeEnd: t('table.inRangeEnd'), // 范围结束
24. andCondition: t('table.andCondition'), // 与条件
25. orCondition: t('table.orCondition'), // 或条件
26. rowGroupColumnsEmptyMessage: t('table.rowGroupColumnsEmptyMessage'), // 无行分组列信息
27. groups: t('table.groups'), // 分组
28. expandAll: t('table.expandAll'), // 全部展开
29. collapseAll: t('table.collapseAll'), // 全部折叠
30. selectedRows: t('table.selectedRows'), // 选中的行
31. totalAndFilteredRows: t('table.totalAndFilteredRows'), // 总行数和过滤行数
32. copy: t('table.copy'), // 复制
33. paste: t('table.paste'), // 粘贴
34.   }

复制代码

各人根据我的注释也能看出来这些地方须要再哪利用，
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()

1. const initparams = ref()
2. // 创建一个响应式引用 initparams，用来存储表格初始化时传递的参数对象
4. let setReady
5. // 声明一个变量 setReady，这个变量当前没有被赋值，可能在其他地方被用到
7. const onGridReady = (params) => {
8.   // 表格初始化完成时触发的事件处理函数 onGridReady，接收一个参数 params
10.   initparams.value = params
11.   // 将表格初始化时的参数对象 params 存储在响应式引用 initparams 中，以便在组件其他地方使用
13.   gridApi.value = params.api
14.   // 将表格的 API 接口对象存储在响应式引用 gridApi 中，通过这个接口可以与表格进行各种交互和操作
16.   let obj = JSON.parse(localStorage.getItem('tableHeader')) || {}
17.   // 从 localStorage 中获取存储的表头配置，如果没有则使用空对象 这个用来保存在本地之后方便存储表格的宽度
19.   if (obj[props.gridName] || '') {
20.     // 如果获取到的表头配置中存在当前表格名称的配置，则执行以下操作
21.     let colDefs = gridApi.value.getColumnDefs()
22.     // 获取当前表格的列定义
24.     colDefs.forEach(colDef => {
25.       colDef.maxWidth = undefined
26.       // 遍历每个列定义，将其最大宽度属性设置为 undefined
27.     })
29.     gridApi.value.setColumnDefs(colDefs)
30.     // 将修改后的列定义重新设置到表格中
32.     return false
33.     // 退出函数，不再继续执行后续代码
34.   }
36.   // 根据表格内容自适应
37.   params.columnApi.autoSizeAllColumns(false)
38.   // 调用 columnApi 的 autoSizeAllColumns 方法，根据内容自动调整所有列的宽度
40.   let colDefs = gridApi.value.getColumnDefs()
41.   // 再次获取当前表格的列定义
43.   colDefs.forEach(colDef => {
44.     colDef.maxWidth = undefined
45.     // 遍历每个列定义，将其最大宽度属性设置为 undefined
46.   })
48.   gridApi.value.setColumnDefs(colDefs)
49.   // 将修改后的列定义重新设置到表格中
51.   const tableWidth = document.querySelector(".ag-header-viewport").clientWidth || 1747
52.   // 获取表格头部视口的宽度，如果获取不到则使用默认宽度 1747
54.   const allColumnsWidth = params.columnApi.columnModel.bodyWidth
55.   // 获取所有列的总宽度
57.   if (allColumnsWidth < tableWidth) {
58.     // 如果所有列的总宽度小于表格视口宽度，则执行以下操作
59.     setTimeout(() => {
60.       if (gridApi.value) {
61.         gridApi.value.sizeColumnsToFit()
62.         // 调用 sizeColumnsToFit 方法，根据表格视口宽度自适应调整列宽
64.         if (document.querySelector(".ag-header-cell").clientWidth > 124) {
65.           saveWidth1(params)
66.           // 如果表格头部单元格的宽度大于 124，则调用 saveWidth1 函数保存当前列宽度
67.         }
68.       }
69.     }, 500)
70.     // 使用 setTimeout 延迟 500 毫秒执行以上操作，确保表格完全渲染完成
71.   }
72. }
74. const saveWidth1 = (params) => {
75.   // 定义一个保存列宽度的函数 saveWidth1，接收一个参数 params
77.   let tableHeader = params.columnApi.columnModel.getColumnState().map(item => ({
78.     // 获取当前列状态，并映射成新的对象数组
79.     width: item.width,
80.     prop: item.colId,
81.     // 映射对象中包含列的宽度和列的 ID
82.   }))
84.   let obj = JSON.parse(localStorage.getItem('tableHeader')) || {}
85.   // 从 localStorage 中获取存储的表头配置，如果没有则使用空对象
87.   obj[props.gridName] = tableHeader
88.   // 将当前表格名称的列配置存储到对象中
90.   localStorage.setItem('tableHeader', JSON.stringify(obj))
91.   // 将对象转换成 JSON 字符串并存储到 localStorage 中
92. }

复制代码

假如须要在欣赏器拖动，缩小放大的过程中也进行一个自动自顺应可以加入下面这行代码

1.   window.addEventListener('resize', initTableWidth)
2.         // 表格渲染完成事件
3.   const initTableWidth = () =>{
4.     const a = initparams.value.api
5.       //根据gridView宽度自适应
6.       setTimeout(() => {
7.         if(a){
8.         let obj = JSON.parse(localStorage.getItem('tableHeader')) || {}
9.         if (obj[props.gridName]&&obj[props.gridName][0].label!==props.gridName) {
10.           a.sizeColumnsToFit();
11.             if (document.querySelector(".ag-header-cell").clientWidth>124) {
12.               let tableHeader = initparams.value.columnApi.columnModel.getColumnState().map(item => ({
13.                 // label: item.colDef.headerName,
14.                 width: item.width,
15.                 prop: item.colId,
16.               }))
17.               obj[props.gridName] = tableHeader
18.               localStorage.setItem('tableHeader', JSON.stringify(obj))
19.             }
20.           }  
21.         }
22.       }, 500);
23.   }

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。