Vue Ag-grid - cellRendererFramework:传递道具

基础概念

cellRendererFramework 是 AG Grid 提供的一个功能，允许你在表格单元格中使用自定义的 React、Angular 或 Vue 组件来渲染内容。这个功能非常强大，因为它允许你将复杂的 UI 控件嵌入到表格中，从而提供更丰富的用户体验。

优势

灵活性：可以使用任何前端框架的组件来渲染单元格内容。
可重用性：可以在多个地方重用相同的组件，减少代码冗余。
维护性：将复杂的 UI 逻辑封装在组件中，使得代码更易于维护。

类型

React 组件
Angular 组件
Vue 组件

应用场景

复杂表单：在单元格中嵌入表单控件。
富文本编辑器：允许用户在单元格中编辑富文本内容。
图表展示：在单元格中显示图表或其他图形元素。

示例代码（Vue）

假设我们有一个 Vue 组件 MyCustomComponent.vue，我们希望在 AG Grid 的某个单元格中使用它，并传递一些道具。

MyCustomComponent.vue

<template>
  <div>
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    description: String
  }
}
</script>

在 AG Grid 中使用

<template>
  <ag-grid-vue
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :frameworkComponents="frameworkComponents"
  ></ag-grid-vue>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue';
import MyCustomComponent from './MyCustomComponent.vue';

export default {
  components: {
    AgGridVue
  },
  data() {
    return {
      columnDefs: [
        {
          headerName: "Custom Column",
          field: "customField",
          cellRendererFramework: 'MyCustomComponent',
          cellRendererParams: {
            title: 'Custom Title',
            description: 'This is a custom description.'
          }
        }
      ],
      rowData: [
        { customField: 'Data 1' },
        { customField: 'Data 2' }
      ],
      frameworkComponents: {
        MyCustomComponent: MyCustomComponent
      }
    };
  }
};
</script>