如何隐藏Ag-Grid中单元格渲染组件中的按钮？
如何隐藏Ag-Grid中单元格渲染组件中的按钮？
提问于 2018-07-25 22:50:12
我在mcomponent中有一个按钮列表，我使用它在网格中显示它，以便在网格上执行操作。我得躲在他们中间。
我的代码有点像这样：
let cols = [{
field: '',
headerName: 'Actions',
width: 250,
colId: 'params',
cellRendererFramework: 'gridEditButtons'
}];这是我的网格的第一列，然后我在这个逻辑中连接其余的列。所以，我可以隐藏列，但如果cellRendererFramework：'gridEditButtons‘有5个按钮，并且我想隐藏下图中黑框中的2列，该怎么办？
GridEditbuttons.Vue的超文本标记语言代码
<template>
<div>
<!-- Approve Button -->
<!-- <v-tooltip bottom>
<v-btn fab small style="height: 23px; width:23px; margin-top: 0px;"
color="primary" slot="activator"
@click.stop="approveRow">
<v-icon>fa-check</v-icon>
</v-btn>
<span>Approve</span>
</v-tooltip> -->
<!-- Release Button -->
<!-- <v-tooltip bottom>
<v-btn fab small style="height: 23px; width:23px; margin-top: 0px;"
color="primary" slot="activator"
@click.stop="releaseRow">
<v-icon>fa-paper-plane</v-icon>
</v-btn>
<span>Release</span>
</v-tooltip> -->
<!-- Edit Button -->
<v-tooltip bottom>
<v-btn fab small style="height: 23px; width:23px; margin-top: 0px;"
color="primary" slot="activator"
@click.stop="editRow">
<v-icon>fa-pencil-alt</v-icon>
</v-btn>
<span>Edit</span>
</v-tooltip>
<!-- Delete Button -->
<v-tooltip bottom>
<v-btn xs4 fab small style="height: 23px; width:23px; margin-top: 0px;"
color="primary" slot="activator"
@click.stop="deleteRow">
<v-icon>fa-trash-alt</v-icon>
</v-btn>
<span>Delete</span>
</v-tooltip>
<!-- View Button -->
<!-- calls to function viewRow in this file when clicked on-->
<v-tooltip bottom>
<v-btn xs4 fab small style="height: 23px; width:23px; margin-top: 0px;"
color="primary" slot="activator"
@click.stop="viewRow">
<v-icon>fa-book</v-icon>
</v-btn>
<span>View</span>
</v-tooltip>
</div>
</template>GridEditButtons.Vue中的脚本
<script>
import Vue from 'vue';
export default Vue.extend({
data () {
return {
dialogDelete: false,
execStatusDialog: false
};
},
methods: {
deleteRow () {
// pass the id and collection name to delete here
let rowObj = this.params.api.getRowNode(this.params.rowIndex);
if (!rowObj || !rowObj.data) {
return this.params.context.vm.alert('error', '', 'Unable to identify the selected record.');
}
this.params.context.vm.tableDeleteBtnClicked(rowObj);
this.dialogDelete = !this.dialogDelete;
},
// Executes when the edit button in the grid is clicked
editRow (event) {
let rowObj = this.params.api.getRowNode(this.params.rowIndex);
// Checks to see if a row is selected or if the selected row has data
if (!rowObj || !rowObj.data) {
// If it doesn't then an error is thrown
return this.params.context.vm.alert('error', '', 'Unable to identify the selected record.');
}
// calls the tableEditBtnClicked method in the Brightspot file
this.params.context.vm.tableEditBtnClicked(rowObj);
},
// Executes when the view button in the grid is clicked
viewRow (event) {
// Gets the selected row
let rowObj = this.params.api.getRowNode(this.params.rowIndex);
// Checks to see if a row is selected or if the selected row has data
if (!rowObj || !rowObj.data) {
// If it doesn't then throw an error
return this.params.context.vm.alert(
'error',
'',
'Unable to identify the selected record.'
);
}
// Calls the tableViewBtnClicked method in Brightspot file
this.params.context.vm.tableViewBtnClicked(rowObj);
},
approveRow (event) {
alert('Approved!'); // chunk of code
},
releaseRow (event) {
alert('Released!'); // chunk of code
}
}
});
</script>回答 1
Stack Overflow用户
发布于 2018-07-31 06:18:27
为什么不使用Vue的v-show or v-if？此示例显示隐藏批准图标。
HTML
<v-tooltip bottom>
<v-btn v-show="showApproveIcon" fab small style="height: 23px; width:23px; margin-top: 0px;"
color="primary" slot="activator"
@click.stop="approveRow">
<v-icon>fa-check</v-icon>
</v-btn>
<span>Approve</span>
</v-tooltip>脚本
data () {
return {
dialogDelete: false,
execStatusDialog: false,
showApproveIcon: false,
};
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51521872
复制相关文章
相似问题