如何使用 ag-grid 将道具传递给自定义标题组件？

Question

我正在使用带有 ag-grid 的 Vue 3，并希望像这样设置一个新的ColDef

const colDef: ColDef = {
  field: 'objectKey',
  headerComponent: ColumnHeader, // my custom component
  headerComponentParams: {
    foo: 'bar'
  },
}

我的ColumnHeader组件现在定义了它的道具

<script setup lang="ts">
const props = defineProps<{
  foo: string;
}>();
</script>

运行该应用程序给我以下错误

[Vue 警告]：缺少必需的道具：“foo”...

这是因为整个props是未定义的。

---

用于复制目的

Plunker 片段https://plnkr.co/edit/OoOD0I8W5NgYX45u它基于https://www.ag-grid.com/vue-data-grid/component-header/#example-custom-header-component

你会得到错误

缺少必需的道具：“名称”...

---

基于https://github.com/ag-grid/ag-grid-vue-example/issues/14我认为它应该可以按预期工作。 有人知道出了什么问题或遗漏了什么吗？

Answer 1

您的文档清楚地说明了 1.如何在 columnDefs 中使用 headerComponent 和 2.如何将参数传递给自定义标题组件。

1. 将组件名称作为字符串传递， 就像使用<component />安装外部组件一样。 它以字符串形式接收组件本身和已安装组件的名称。 我的猜测是 AgGridVue 在内部也使用了<component /> 。

// main.js
data: function () {
    return {
      rowData: [
        {
          foo: 'bar',
        },
      ],
      columnDefs: [
        {
          field: 'foo',
          headerComponent: 'CustomHeader',
          headerComponentParams: {
            name: 'test',
          },
        },
      ],
    };
  },

当一个 Vue 组件被实例化时，网格将通过this.params为您提供网格 API、许多实用方法以及单元格和行值 - 所提供的接口记录在下面。

2. 修改 ColumnHeader 以使用this.params而不是props 。

// customHeaderVue.js
export default {
  template: `
      <div>
        *{{ name }}*
      </div>
    `,
  computed: {
    name() {
      return this.params.name;
    },
  },
};

工作演示： https ://plnkr.co/edit/L7X6q3Mr7K0pewO8

编辑：ag-grid 的IHeaderParams不支持泛型。 要在没有泛型的情况下扩展给定类型，请使用这些方法。

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

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

注意：我建议在columnDefs.headerComponent中使用组件的名称，因为官方文档是这样说的，并且在工作演示中看起来不错； 但它实际上取决于 Vue API。 我认为它与 Vue 内部变量范围有关。

• Vue Options API（基于类的组件）：放置组件名称字符串。
• Vue Compositions API(Functional component)：放组件变量本身。