親コンポーネントからのデータ変更時に ag-grid 内のすべての列を非表示にしたり、再表示したりしようとしています。
これは私の子コンポーネントです
<template>
<v-card>
<v-card-title>
<v-row no-gutters>
<v-col class="text-right">
<v-btn color="blue" outlined @click="hideColumns">hide Format</v-btn>
</v-col>
</v-row>
</v-card-title>
<ag-grid-vue
//
></ag-grid-vue>
</v-card>
</template>
<script>
//All imports of aggrid
export default {
name: "DetailsTable",
props: {
columnDefs: {
type: Array,
default() {
return null;
},
},
rowData: {
type: Array,
default() {
return null;
},
},
},
components: {
"ag-grid-vue": AgGridVue,
},
data() {
return {
agModule: AllModules,
newRowData: [],
gridApi: null,
gridOptions: {},
};
},
watch: {
rowData: function (newVal, oldVal) {
this.newRowData = newVal;
},
columnDefs: function (newval, oldval) {
this.hideColumns();
},
},
methods: {
hideColumns() {
this.gridOptions.columnApi.getAllColumns().forEach((e) => {
this.gridOptions.columnApi.setColumnVisible(e.colId, false); //In that case we hide it
});
},
},
mounted() {
this.newRowData = this.rowData;
this.gridApi = this.gridOptions.api;
},
};
</script>
親コンポーネントで API が呼び出されるたびに、親コンポーネントでは、columnDefs と rowData が再初期化されます。ここで再び、columnDefs を変更して、すべての列を非表示にしたいと思います。
------------------------
setColumnsVisible() は、Column.colId である数値を引数として受け入れます。 getAllColumns() は Column の配列を返すため、ここで for ループを使用する必要があります
const showAllColumn = () => {
const allColumns = columnApi.getAllColumns().forEach((c) => {
columnApi.setColumnVisible(c.getColId(), true);
});
};
const hideAllColumn = () => {
const allColumns = columnApi.getAllColumns().forEach((c) => {
columnApi.setColumnVisible(c.getColId(), false);
});
};
使用法
<button onClick={showAllColumn}>Show all columns</button>
<button onClick={hideAllColumn}>Hide all columns</button>
ライブサンプル
7
1
ボタンのクリック時に関数を呼び出すと、これが機能するのはなぜですか。しかし、別のデータの変更時に関数を呼び出した場合、この列は非表示になりませんか?なぜこれが起こっているのか考えてみましょう。 vuejs を使用しています
– ヨガをしていること
2020 年 9 月 3 日 12:03
mounted() で columnApi を割り当てていないようです
– ニアハスカール
2020 年 9 月 3 日 13:28
gridOptions を直接使用していますが、問題はありますか?
– ヨガをしていること
2020 年 9 月 3 日 13:30
実はいいえ、それを忘れていました。 codesandbox サンプルをセットアップして何が起こるかを確認します
– ニアハスカール
2020 年 9 月 3 日 13:32
@click="hideColumns" を置き換えてみてください。 @click="hideColumns()"
を使用
– ニアハスカール
2020 年 9 月 3 日 13:50
