如何在 Ag-Grid 中隐藏单元格渲染组件中的按钮？答案

【问题标题】：How do I hide a button from cell rendered component in Ag-Grid?如何在 Ag-Grid 中隐藏单元格渲染组件中的按钮？
【发布时间】：2019-01-02 10:45:55
【问题描述】：

我在 mcomponent 中有一个按钮列表，用于在网格中显示它以在网格上执行操作。我需要隐藏它们。

我的代码有点像这样：

let cols = [{
    field: '',
    headerName: 'Actions',
    width: 250,
    colId: 'params',
    cellRendererFramework: 'gridEditButtons'
  }];

这是我的网格的第一列，然后我在这个逻辑中连接其余的列。所以，我可以隐藏列，但是如果 cellRendererFramework: 'gridEditButtons' 有 5 个按钮，我想隐藏下图中黑框中的 2 列。

GridEditbuttons.Vue 的 HTML 代码

<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>

【问题讨论】：

你能告诉我们gridEditButtons的代码吗？
@AlienTechnology 添加

标签： vue.js vuejs2 ag-grid ag-grid-ng2 ag-grid-react

【解决方案1】：

为什么不使用 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,
  };
},

【讨论】：