AG-GRID

一个高性能表格组件

安装

1
2
3
4
5
6
# vue2
npm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0

# vue3
npm install --save ag-grid-community
npm install --save ag-grid-vue3

引入

1
2
3
4
5
6
7
8
// vue2
import { AgGridVue } from "ag-grid-vue";

// 样式
// 基本样式
import "ag-grid-community/styles/ag-grid.css";
// 主题样式
import "ag-grid-community/styles/ag-theme-alpine.css";

网格配置

列配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<ag-grid-vue
    style="width: 100%; height: 100%"
    class="ag-theme-quartz"
    :columnDefs="colDefs"
    :rowData="rowData"
></ag-grid-vue>

<script>
rowData: [
  { make: "Tesla", model: "Model Y", price: 64950, electric: true },
  { make: "Toyota", model: "Corolla", price: 29600, electric: false },
  { make: "Ford", model: "F-Series", price: 33850, electric: false },
],
colDefs: [
  {
    field: "make"
  },
  {
    field: "model"
  },
  {
    field: "price"
  },
  {
    field: "electric"
  }
],
</script>

默认所有列都会生效的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
<ag-grid-vue
    style="width: 100%; height: 100%"
    class="ag-theme-quartz"
    :columnDefs="colDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
></ag-grid-vue>

<script>
const defaultColDef = {
  filter: true, // 这样所有列都可以过滤了
}
</script>

分页

1
2
3
4
5
6
7
8
<ag-grid-vue
    style="width: 100%; height: 100%"
    class="ag-theme-quartz"
    :columnDefs="colDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
    :pagination="true"
></ag-grid-vue>

AG-GRID 自定义主题

  1. 自定义主题必须以 ag-theme- 开头
  2. 可以使用少量的 css 变量来扩展现有主题
1
2
3
4
5
6
7
.ag-theme-mytheme {
  --ag-grid-size: 8px;
  --ag-border-color: red;
}
.ag-theme-mytheme .ag-header {
  font-style: italic;
}
1
2
3
4
5
6
7
8
9
<!-- 使用ag-grid提供的主题 quartz 并且自定义主题 -->
<ag-grid-vue
    style="width: 100%; height: 100%"
    class="ag-theme-quartz ag-theme-mytheme"
    :columnDefs="colDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
    :pagination="true"
></ag-grid-vue>

ag-grid 变量引用

  1. --ag-active-color
    • 仅仅用于 quartz 主题
    • 选中行的重点样式，或范围选中，输入框外边框颜色
  2. --ag-foreground-color
    • 字体颜色 icon 颜色
  3. --ag-background-color
    • 背景颜色
  4. --ag-secondary-foreground-color
    • 表头颜色
  5. --ag-data-color
    • 网格单元格字体颜色
  6. --ag-header-foreground-color
    • 表头字体颜色
  7. --ag-header-background-color
    • 表头背景颜色

Columns

Columns 定义

默认所有列都会生效的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
<ag-grid-vue
    style="width: 100%; height: 100%"
    class="ag-theme-quartz"
    :columnDefs="colDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
></ag-grid-vue>

<script>
const defaultColDef = {
  filter: true, // 这样所有列都可以过滤了
}
</script>

Column Types

使用 ColumnTypes 定义一组一起应用的列属性。列类型中的属性可通过设置列的 type 属性应用于列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<ag-grid-vue
    style="width: 100%; height: 100%"
    class="ag-theme-quartz ag-theme-arc"
    pagination
    rowSelection="multiple"
    :columnDefs="colDefs"
    :rowData="rowData"
    :defaultColDef="defaultColDef"
    :columnTypes="columnTypes"
    @cell-value-changed="onCellValueChanged"
></ag-grid-vue>

<script>
colDefs: [
	{
		field: "mission",
		label: "任务",
		checkboxSelection: true,
	},
	{
		field: "company",
		name: "公司",
		cellRenderer: "CompanyLogoRender",
	},
	{
		field: "location",
		name: "地址",
	},
	{
		field: "date",
		name: "日期",
		type: "rightAligned",
	},
	{
		field: "price",
		name: "价格",
		// valueFormatter: (params) => {
		//   return "¥" + params.value.toLocaleString();
		// },
		type: "currency",
	},
	{
		field: "successful",
		name: "有效",
	},
	{
		field: "rocket",
		name: "有效",
		type: ["currency", "shaded"],
	},
],
defaultColDef: {
	filter: true,
	// editable: true,
},
columnTypes: {
	currency: {
		width: 150,
		valueFormatter: (params) => "$" + params.value,
	},
	shaded: {
		cellClass: "shaded-class",
	}
}
</script>

grid 默认提供的 ColumnTypes 有两个 rightAligned 和 numericColumn 他们的作用是相同的。都相当于表头单元格设置了类名 ag-right-aligned-header，和数据单元格添加了 ag-right-aligned-cell 类名

1
2
3
4
5
6
7
8
9
interface ColDef {
	field: string; // 字段名
	headerName?: string; // 表头名称
	colId?: string; // 如果有就必须保持唯一 如果不唯一他回自动生成 _n 后缀 来维持唯一
	type?: string[] | string; // 应用的 columnTypes
	filter?: boolean; // 是否可过滤
	editable?: boolean; // 是否可编辑
	valueFormatter?: (params) => string; // 格式化内容
}