当前位置：首页 > article >正文

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

article 2024/11/7 5:09:04

文章目录

安装
基础使用
- 列数据可编辑
- 列数据选择填入
- 行数据可选择
- 添加分页信息
- 表头整体添加模糊筛选
- 让某一个 Cell 或者 Row 变色
参考
代码
- 基本代码
- 整体代码（一）

安装

首先用 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>

参考

数据的变化，比较常见的场景都在这里 https://www.ag-grid.com/javascript-data-grid/data-update-row-data/

代码

基本代码

<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>