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>
属性含义
- 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
- columnDefs 定义表格列
- 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'
}