Ag-Grid整理

底部

API文档地址

英文API文档:https://www.ag-grid.com/
中文API文档:https://www.itxst.com/ag-grid/tutorial.html

组件用法

<!-- 数据列表 -->
<ag-grid-vue ref="multipleTable" class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" 
		@grid-ready="onGridReady" :defaultColDef="defaultColDef" @selection-changed="onSelectionChanged" 
		:rowSelection="rowSelection" :enableBrowserTooltips="true" :stopEditingWhenCellsLoseFocus="false"
		@cell-value-changed="onCellValueChanged" :isRowSelectable="isRowSelectable" :editType="editType"
		:suppressRowClickSelection="suppressRowClickSelection" :suppressClickEdit="suppressClickEdit"
		:sideBar="sideBar" :components="components" :excelStyles="excelStyles">
</ag-grid-vue>

属性含义

1. class 表格主题

class="table ag-theme-balham" 
Ag-Grid表格的主题有 5 种
① ag-theme-alpine
② ag-theme-alpine-dark
③ ag-theme-balham
④ ag-theme-balham-dark
⑤ ag-theme-material
样式种类整理参照来源:https://blog.csdn.net/WQearl/article/details/106636786 

2. columnDefs 定义表格列
3. rowData 表格展示的数据

data() {
   
	return {
   
		columnDefs: null, //表格默认展示列
		rowData: null, //画面显示表格数据,查询后赋值
	}
},
beforeMount() {
   
	this.columnDefs = [{
   
			// ID
			headerName: 'ID', //序号
			field: 'id',
			hide: true //默认不显示
		},
		{
   
			// 姓名
			headerName: '姓名', //表格显示列名
			field: 'name', //该列对应的后台返回数据中的Key
			tooltipField: 'name', //鼠标悬浮是单元格内容的tooltip提示
			checkboxSelection: true, //该列前带CheckBox复选框
			pinned: 'left', //设置当前列为固定列,且固定在左侧
			width: 90, //宽度
			minWidth: 90, //最小宽度
		},
		{
   
			// 年龄
			headerName: '年龄',
			field: 'age',
			tooltipField: 'age'
		}