[英]How to pass props to custom header component using ag-grid?
I'm using Vue 3 with ag-grid and want to setup a new ColDef
like so我正在使用带有 ag-grid 的 Vue 3,并希望像这样设置一个新的
ColDef
const colDef: ColDef = {
field: 'objectKey',
headerComponent: ColumnHeader, // my custom component
headerComponentParams: {
foo: 'bar'
},
}
My ColumnHeader
component defines its props for now我的
ColumnHeader
组件现在定义了它的道具
<script setup lang="ts">
const props = defineProps<{
foo: string;
}>();
</script>
Running the app gives me the following error运行该应用程序给我以下错误
[Vue warn]: Missing required prop: "foo" ...
[Vue 警告]:缺少必需的道具:“foo”...
This is because the whole props
are undefined.这是因为整个
props
是未定义的。
For reproduction purposes用于复制目的
Plunker snippet https://plnkr.co/edit/OoOD0I8W5NgYX45u which is based on https://www.ag-grid.com/vue-data-grid/component-header/#example-custom-header-component Plunker 片段https://plnkr.co/edit/OoOD0I8W5NgYX45u它基于https://www.ag-grid.com/vue-data-grid/component-header/#example-custom-header-component
You will get the error你会得到错误
Missing required prop: "name" ...
缺少必需的道具:“名称”...
Based on https://github.com/ag-grid/ag-grid-vue-example/issues/14 it should work as expected I think.基于https://github.com/ag-grid/ag-grid-vue-example/issues/14我认为它应该可以按预期工作。 Does someone know what's wrong or missing?
有人知道出了什么问题或遗漏了什么吗?
your document clearly states 1. how to use headerComponent in columnDefs and 2. how parameters are passed down to custom header components. 您的文档清楚地说明了 1.如何在 columnDefs 中使用 headerComponent 和 2.如何将参数传递给自定义标题组件。
<component />
.<component />
安装外部组件一样。 It receives both component itself and mounted component's name in string.<component />
internally.<component />
。// main.js
data: function () {
return {
rowData: [
{
foo: 'bar',
},
],
columnDefs: [
{
field: 'foo',
headerComponent: 'CustomHeader',
headerComponentParams: {
name: 'test',
},
},
],
};
},
When a Vue component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell and row values available to you via
this.params
- the interface for what is provided is documented below.当一个 Vue 组件被实例化时,网格将通过
this.params
为您提供网格 API、许多实用方法以及单元格和行值 - 所提供的接口记录在下面。
this.params
instead of props
.this.params
而不是props
。// customHeaderVue.js
export default {
template: `
<div>
*{{ name }}*
</div>
`,
computed: {
name() {
return this.params.name;
},
},
};
working demo: https://plnkr.co/edit/L7X6q3Mr7K0pewO8工作演示: https ://plnkr.co/edit/L7X6q3Mr7K0pewO8
edit: ag-grid's IHeaderParams
does not support generics.编辑:ag-grid 的
IHeaderParams
不支持泛型。 to extend given type without generics, please use these methods.要在没有泛型的情况下扩展给定类型,请使用这些方法。
import type { IHeaderParams } from "ag-grid-community";
// fig 1
// combine with type intersection
type CustomHeaderParams = IHeaderParams & { name: string };
// fig2
// combine with interface extension
interface CustomHeaderParams extends IHeaderParams {
name: string;
}
here are typed examples of CustomHeader.vue
这是
CustomHeader.vue
的类型示例
// fig 1. Vue3 composition API, with <script setup>
<script lang="ts" setup>
import { defineProps, onMounted, ref } from "vue";
import type { IHeaderParams } from "ag-grid-community";
type CustomHeaderParams = IHeaderParams & { name: string };
const props = defineProps<{ params: CustomHeaderParams }>();
const name = ref(props.params.name);
</script>
<template>
<div>*{{ name }}*</div>
</template>
// ------
// 2. Vue3 options API, without <script setup>
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import type { IHeaderParams } from "ag-grid-community";
type CustomHeaderParams = IHeaderParams & { name: string };
export default defineComponent({
props: {
params: {
type: Object as PropType<CustomHeaderParams>,
},
},
setup(props) {
return { name: props.params?.name ?? "" };
},
});
</script>
<template>
<div>*{{ name }}*</div>
</template>
note : I've suggested using the component's name in columnDefs.headerComponent
because the official document says so, and seems fine in the working demo;注意:我建议在
columnDefs.headerComponent
中使用组件的名称,因为官方文档是这样说的,并且在工作演示中看起来不错; but it actually depends on the Vue API.但它实际上取决于 Vue API。 I assume it has something to do with Vue internal variable scope.
我认为它与 Vue 内部变量范围有关。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.