安虹睿
1 year ago
7 changed files with 249 additions and 19 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,107 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<ag-grid-vue |
||||
|
:style="'width:500px; height:'+uTableHeight + 'px'" |
||||
|
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 |
||||
|
}, |
||||
|
props:{ |
||||
|
// 已app-main高度为100% 需要减掉的高度 |
||||
|
setUTableHeight: { |
||||
|
type: Number, |
||||
|
default: () => { |
||||
|
return 280; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
uTableHeight:null,//表格撑开高度 |
||||
|
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 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
// 更改高度 |
||||
|
setUTableHeight(n,o){ |
||||
|
this.setTableHeightHandle(n) |
||||
|
} |
||||
|
}, |
||||
|
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 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
{ make: "Porsche", model: "Boxster", price: 72000 }, |
||||
|
]; |
||||
|
this.setTableHeightHandle() |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 设置表格高度 |
||||
|
setTableHeightHandle(height){ |
||||
|
let _height = height || this.setUTableHeight |
||||
|
let _app_height = document.getElementsByClassName('app-main')[0].clientHeight |
||||
|
this.uTableHeight = Number(_app_height) - Number(_height) |
||||
|
console.log() |
||||
|
}, |
||||
|
// 获取表格高度 勿删 业务当中有用 |
||||
|
getTableHeight(){ |
||||
|
return this.uTableHeight |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
Loading…
Reference in new issue