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的this article？此示例显示隐藏“批准”图标。

HTML

public ConnectionSettings(
    Uri url, string username, string password, bool checkPermissions)
{
    this.username = Guard.Argument(() => username).NotNull();
    this.password = Guard.Argument(() => password).NotNull();
    this.url = Guard.Argument(() => url).NotNull().Https();
    this.checkPermissions = checkPermissions;
}

脚本

input dataframe
    example_df_before <- data.frame(
      myNums = c("A","TEXT",1,2,3,4,5,6,9,8,4),
      myChars = c("Adesc","Bdesc","C","Ddes","Ec","F","G",99,12,11,"TEST2"),
      stringsAsFactors = FALSE
    ) 

  myNums myChars
1       A   Adesc
2    TEXT   Bdesc
3       1       C
4       2    Ddes
5       3      Ec
6       4       F
7       5       G
8       6      99
9       9      12
10      8      11
11      4   TEST2

output dataframe
      example_df_after <- data.frame(
      myNums = c("A","TEXT",NA,NA,NA,NA,NA,NA,NA,NA,NA),
      myChars = c("Adesc","Bdesc","C","Ddes","Ec","F","G",99,12,11,"TEST2"),
      stringsAsFactors = FALSE
    ) 

   myNums myChars
1       A   Adesc
2    TEXT   Bdesc
3    <NA>       C
4    <NA>    Ddes
5    <NA>      Ec
6    <NA>       F
7    <NA>       G
8    <NA>      99
9    <NA>      12
10   <NA>      11
11   <NA>   TEST2

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

1 个答案: