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

}

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