如何在 Ag-Grid 中隱藏單元格渲染組件中的按鈕？

Question

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

Answer 1

為什么不使用 Vue 的v-show 或 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,
  };
},