安虹睿
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