【Ag-Grid】 使用笔记 Vue3 + Vite（一）

---

安装

首先用 vite 脚手架搭建一个空的项目，然后依赖安装

pnpm install ag-grid-vue3 ag-grid-community @ag-grid-community/locale

其中

• 核心组件：ag-grid-vue3
• 提供基础样式：ag-grid-community
• 提供语言包：@ag-grid-community/locale

我当前各个依赖的版本如图所示

---

基础使用

可以直接拿文本最下面的 基本代码 来起步，代码量还是比较少的，阅读没什么问题，前面几个步骤都是根据官网的说明做过来的，实现的效果如下图所示

提示：官网上的例子有可能不正确，比方说这个

怎么解决呢，看这个 CodeLive 上的代码

列数据可编辑

在允许编辑的列对象中，添加 editable 为 true

我们改一下 Make 列的数据试一试

但是如果使用了 valueGetter 的话，即使编辑了，也不会生效，因为 valueGetter 是依赖某些数据的，比方说这里的 Make & Model 是依赖 p.make + p.model 的

列数据选择填入

{
   
  field: "make",
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
   
    values: ['Tesla', 'Ford', 'Toyota'],
  },
},

行数据可选择

添加分页信息

const pagination = ref(true)
const paginationPageSize = ref(500)
const paginationPageSizeSelector = ref([200, 500, 1000])

<ag-grid-vue style="width: 100%; height: 100%" :class="themeClass" :columnDefs="colDefs" :rowData="rowData"
   :defaultColDef="defaultColDef" :gridOptions="gridOptions" :rowSelection="rowSelection" :pagination="pagination"
   :paginationPageSize="paginationPageSize" :paginationPageSizeSelector="paginationPageSizeSelector">
 </ag-grid-vue>

表头整体添加模糊筛选

const defaultColDef = ref({
   
  filter: "agTextColumnFilter",
  floatingFilter: true,
});
</script>

<template>
  <div class="container">
    <ag-grid-vue style="width: 100%; height: 100%" :class="themeClass" :columnDefs="colDefs" :rowData="rowData"
      :defaultColDef="defaultColDef" :gridOptions="gridOptions" :rowSelection="rowSelection" :pagination="pagination"
      :paginationPageSize="paginationPageSize" :paginationPageSizeSelector="paginationPageSizeSelector">
    </ag-grid-vue>
  </div>

</template>

让某一个 Cell 或者 Row 变色

如图所示

// 部分代码
const colDefs = ref