安虹睿
1 year ago
5 changed files with 175 additions and 18 deletions
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<div> |
|||
<el-button @click="clickHandle('edit')" size="small" type="text">编辑</el-button> |
|||
<el-button @click="clickHandle('delete')" size="small" type="text">删除</el-button> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
cellValue:null |
|||
}; |
|||
}, |
|||
mounted(){ |
|||
console.log(16,this.params.api.getRowNode(2)) |
|||
this.cellValue = this.params.data; |
|||
}, |
|||
methods:{ |
|||
clickHandle(data){ |
|||
console.log(data,this.cellValue) |
|||
}, |
|||
// getValueToDisplay(params) { |
|||
// return this.params.api.getRowNode(params.rowIndex).data |
|||
// }, |
|||
} |
|||
} |
|||
</script> |
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<div> |
|||
<ag-grid-vue |
|||
style="width:500px; height: 500px" |
|||
class="ag-theme-alpine" |
|||
:columnDefs="columnDefs" |
|||
:rowData="rowData" |
|||
:defaultColDef="defaultColDef" |
|||
> |
|||
</ag-grid-vue> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import "ag-grid-community/styles/ag-grid.css"; |
|||
import "ag-grid-community/styles/ag-theme-alpine.css"; |
|||
import { AgGridVue } from 'ag-grid-vue'; |
|||
import agGridBtn from './agGridBtn.vue'; |
|||
export default { |
|||
name: "agGridDemo", |
|||
components: { |
|||
AgGridVue, |
|||
agGridBtn |
|||
}, |
|||
data() { |
|||
return { |
|||
columnDefs: null, |
|||
rowData: null, |
|||
defaultColDef: { |
|||
// flex:1, |
|||
filter: true, |
|||
sortable: true, |
|||
floatingFilter: true, |
|||
resizable:true, |
|||
cellClass:"cell-wrap-text", |
|||
headerClass: 'ag-header-center', |
|||
autoHeight:true |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.columnDefs = [ |
|||
{ |
|||
field:'操作', |
|||
lockPosition: 'left', |
|||
cellRenderer: 'agGridBtn', |
|||
cellClass: 'locked-col', |
|||
width: 120, |
|||
suppressNavigable: true, |
|||
pinned:'right', |
|||
floatingFilter:false |
|||
}, |
|||
{ field: "make" }, |
|||
{ field: "model" }, |
|||
{ field: "price" }, |
|||
]; |
|||
|
|||
this.rowData = [ |
|||
{ make: "Toyota", model: "Celica", price: 35000 }, |
|||
{ make: "Ford", model: "Mondeo", price: 32000 }, |
|||
{ make: "Porsche", model: "Boxster", price: 72000 }, |
|||
]; |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
Loading…
Reference in new issue