当我单击每列旁边的过滤器图标时,它会打开弹出窗口,显示用于选择过滤器的选项,但是仅显示弹出窗口,其后面的实际网格消失了。因此,弹出窗口只是漂浮在空的背景上。当我关闭弹出窗口时,网格返回。我仅按<script src="./js/vue.js"></script>
使用Vue.js我的html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="node_modules/xel/themes/material.css">
<link rel="stylesheet" href="css/style.css">
<title>Test</title>
</head>
<body>
<div id="app">
<app-header :par="'test'"></app-header>
<app-grid ref="grid"></app-grid>
</div>
<script src="../node_modules/xel/xel.min.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/render.js"></script>
</body>
</html>
我的js:
class Spreadsheet {
constructor(
rowData = [],
columnDefs = [
{
headerName: 'Name',
field: 'name',
sortable: true,
checkboxSelection: true,
headerCheckboxSelection: true,
filter: 'agTextColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
},
{
headerName: 'Model',
field: 'model',
sortable: true,
filter: 'agTextColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
},
{
headerName: 'Price',
field: 'price',
sortable: true,
editable: true,
filter: 'agNumberColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
}
]
) {
this.template = `
<div class="spreadsheet">
<x-input class="filter" type="text" @input="filter">
<x-label>filter...</x-label>
</x-input>
<div ref="grid_vue" class="ag-theme-fresh"></div>
</div>
`
this.data = function() {
return {
columnDefs: null,
rowData: null,
gridOptions: null,
devices: []
}
}
this.beforeMount = function() {
this.devices = rowData;
this.gridOptions = {
suppressDragLeaveHidesColumns: true,
defaultColDef: {
filter: true,
resizable: true,
width: 100
},
columnDefs: columnDefs,
rowData: rowData,
enableCellChangeFlash: true,
animateRows: true,
rowSelection: 'multiple',
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
}
}
}
methods = {
addItem(item_obj) {
this.devices.push(item_obj);
this.gridOptions.api.setRowData(this.devices);
},
filter(event) {
const filter_text = event.target.value;
this.gridOptions.api.setQuickFilter(filter_text);
},
redrawAllRows() {
this.gridOptions.api.refreshCells();
this.gridOptions.api.redrawRows();
}
}
mounted = function() {
const eGridDiv = this.$refs.grid_vue;
new agGrid.Grid(eGridDiv, this.gridOptions);
}
beforeUpdate = function() {
console.log('beforeUpdate');
this.redrawAllRows();
}
}
const devices = [
{name: "phone", model: 'Sumsung', price: 35000, class: "smartphone"},
{name: "laptop", model: 'HP', price: 32000, class: "pc"},
{name: "test", model: 'Test', price: 72000, class: "test"}
];
const app_table = new Spreadsheet(devices);
const app_header = {
props: ['par'],
template: `
<div class="pageHeader">
<x-button class="addDongleButton" @click="addItem">
<x-label>Add Item</x-label>
</x-button>
</div>
`,
methods: {
addItem() {
console.log(this.par);
const some_obj = {name: "Test2", model: 'X2', price: 555, class: "test"};
vm.$refs.grid.addItem(some_obj);
}
}
};
const vm = new Vue({
el: "#app",
components: {
appHeader: app_header,
appGrid: app_table
}
});
Css:
@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-fresh.css";
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
background: rgb(241, 241, 241);
box-sizing: border-box;
}
.pageHeader {
z-index: 1000;
background: #a1c4dd;
height: 75px;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.spreadsheet {
margin: 85px 5% 20px;
}
.filter {
display: inline-block;
height: 25px;
margin-bottom: 5px;
}
.ag-theme-fresh {
height: 400px;
width: 100%;
}
.ag-theme-fresh.ag-dnd-ghost {
width: 30%;
min-width: 100px;
}
我不知道是否是同样的问题,但是我是在寻找非常相似的经验的同时来到这篇文章的。我找到了一个带有ag-popup类的div,如果我创建一个css规则,将高度设为0,则似乎可以解决此问题,并且尚未看到副作用。即
.ag-popup
{
height: 0;
}