这是一个基于Vue.js的数据表格组件。
官网：https://www.ag-grid.com/vue-data-grid/vue2/
依赖下载
依赖下载
npm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0
npm install --save ag-grid-enterprisemain.js
import 'ag-grid-enterprise';简单使用
<template>
<ag-grid-vue
style="width: 500px; height: 200px"
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData"
:autoGroupColumnDef="autoGroupColumnDef"
@grid-ready="onGridReady"
>
</ag-grid-vue>
</template>
<script>
import { AgGridVue } from "ag-grid-vue";
export default {
name: "App",
data() {
return {
columnDefs: null,
rowData: null,
autoGroupColumnDef: {
headerName: 'Model',
field: 'model',
cellRenderer: 'agGroupCellRenderer',
cellRendererParams: {
checkbox: true
}
}
};
},
components: {
AgGridVue,
},
methods: {
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
},
getSelectedRows() {
const selectedNodes = this.gridApi.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
const selectedDataStringPresentation = selectedData.map(node => `${node.make} ${node.model}`).join(', ');
alert(`Selected nodes: ${selectedDataStringPresentation}`);
}
},
beforeMount() {
this.columnDefs = [
{ field: 'make', sortable: true, filter: true, checkboxSelection: true },
{ field: 'model', sortable: true, filter: true },
{ field: 'price', sortable: true, filter: true }
];
this.rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
];
},
};
</script>
<style lang="scss">
@import "~ag-grid-community/styles/ag-grid.css";
@import "~ag-grid-community/styles/ag-theme-alpine.css";
</style>样式修改
表格样式
方法一
style直接改
<style lang="scss">
@import "~ag-grid-community/styles/ag-grid.css";
@import "~ag-grid-community/styles/ag-theme-alpine.css";
// 表头背景
.ag-header {
background-color: #F7F9FE !important;
}
// 偶数表体背景
.ag-row-odd{
background-color: #eff7fe !important;
}
// 合计固定页脚样式问题
.ag-pinned-left-floating-bottom{
.ag-row-even{
.indexColumn{
color: transparent;
}
}
}
.ag-floating-bottom{
.actions-cell{
display: none !important;
}
}
// 表体border
.ag-ltr .ag-cell{
border-right: 1px solid #bdc3c7 !important;
}
.ag-pinned-right-header .ag-header-cell-resize::after{
left: 0%;
}
[col-id="indexColumn"]{
.ag-header-cell-resize::after{
height: 0px !important;
}
}
// 表体点击border颜色
.ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within{
border-color: #2196f3 !important;
}
// 表头右border
.ag-header-cell-resize::after{
top:8px !important;
width: 1px !important;
height: 50% !important;
}
</style>方法二
node_modules
[class*=ag-theme-] {
--ag-cell-horizontal-border 表体border
}.ag-theme-alpine, .ag-theme-alpine-dark {
--ag-header-background-color 表头背景颜色
--ag-header-column-resize-handle-height 表头border高度
--ag-header-column-resize-handle-width 表头border宽度
--ag-odd-row-background-color 奇数表体背景颜色
--ag-background-color 偶数表体背景颜色
}
