【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([{field: "electric",cellClassRules: {'rag-green': params => params.value === true,}}
]);
const rowClassRules = ref({'rag-red': params => params.data.make === 'Ford',
})
</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":rowClassRules="rowClassRules"></ag-grid-vue></div></template><style scoped>
::v-deep .rag-red {background-color: #cc222244;
}:deep(.rag-green) {background-color: #33cc3344;
}
</style>

---

代码

基本代码

<script setup>
import { ref } from 'vue';
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the Data Grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the Data Grid
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component
import MyButton from './Button.vue'
import { AG_GRID_LOCALE_CN, AG_GRID_LOCALE_JP } from '@ag-grid-community/locale';const gridOptions = {localeText: AG_GRID_LOCALE_CN, // 设置为中文语言包
};const rowData = ref([{ make: "Tesla", model: "Model Y", price: 64950, electric: true },{ make: "Ford", model: "F-Series", price: 33850, electric: false },{ make: "Toyota", model: "Corolla", price: 29600, electric: false },{ make: "Mercedes", model: "EQA", price: 48890, electric: true },{ make: "Fiat", model: "500", price: 15774, electric: false },{ make: "Nissan", model: "Juke", price: 20675, electric: false },
]);const colDefs = ref([{headerName: "Make & Model", valueGetter: ({ data: p }) => {console.log(p);return p.make + ' ' + p.model},flex: 2,filter: true},{ field: "make", },{ field: "model" },{ field: "price", valueFormatter: p => '£' + p.value.toLocaleString() },{ field: "electric" },{field: "button",cellRenderer: MyButton}
]);const defaultColDef = {flex: 1,
};
const themeClass = ref("ag-theme-quartz-dark");</script><template><div class="container"><ag-grid-vue style="width: 100%; height: 100%" :class="themeClass" :columnDefs="colDefs" :rowData="rowData":defaultColDef="defaultColDef" :gridOptions="gridOptions"></ag-grid-vue></div></template><style scoped>
.container {height: 500px;padding: 20px;
}
</style>

整体代码（一）

<script setup>
// 已经把 "ag-grid-community/styles/ag-grid.css" 等 css 样式文件放到 main.js 中
import { ref } from 'vue';
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component
import MyButton from './Button.vue'
import { AG_GRID_LOCALE_CN, AG_GRID_LOCALE_JP } from '@ag-grid-community/locale';const gridOptions = {localeText: AG_GRID_LOCALE_CN,
};const rowData = ref([{ make: "Tesla", model: "Model Y", price: 64950, electric: true },{ make: "Ford", model: "F-Series", price: 33850, electric: false },{ make: "Toyota", model: "Corolla", price: 29600, electric: false },{ make: "Mercedes", model: "EQA", price: 48890, electric: true },{ make: "Fiat", model: "500", price: 15774, electric: false },{ make: "Nissan", model: "Juke", price: 20675, electric: false },
]);const themeClass = ref("ag-theme-quartz-dark");
const rowSelection = {mode: 'multiRow',headerCheckbox: false,
}
const pagination = ref(true)
const paginationPageSize = ref(500)
const paginationPageSizeSelector = ref([200, 500, 1000])const defaultColDef = ref({filter: "agTextColumnFilter",floatingFilter: true,
});const colDefs = ref([{headerName: "Make & Model", valueGetter: ({ data: p }) => {// console.log(p);return p.make + ' ' + p.model},flex: 2,filter: true,editable: true},{field: "make",editable: true,cellEditor: 'agSelectCellEditor',cellEditorParams: {values: ['Tesla', 'Ford', 'Toyota'],},},{ field: "model", editable: true },{ field: "price", valueFormatter: p => '£' + p.value.toLocaleString() },{field: "electric",cellClassRules: {// apply green to electric cars'rag-green': params => params.value === true,}},{field: "button",cellRenderer: MyButton}
]);const rowClassRules = ref({'rag-red': params => params.data.make === 'Ford',
})
</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":rowClassRules="rowClassRules"></ag-grid-vue></div></template><style scoped>
.container {height: 500px;padding: 20px;
}::v-deep .rag-red {background-color: #cc222244;
}:deep(.rag-green) {background-color: #33cc3344;
}
</style>