如何在 AG Grid Vue 中将函数传递给详细信息行按钮？

Question

我正在开发一个 AG Grid Vue 项目，并使用

masterDetail

功能建立了主从关系。在我的详细信息行中，我有一个按钮，我想用它来添加变体。这是我设置代码的方式：

商店

setDetailCellRendererParams() {
    this.detail_cell_renderer_params = {
        // ... other properties ...

        template: (params) => {
            return (
                '<div class="flex flex-column p-4">' +
                '<div ref="eDetailGrid"></div>' +
                '<button class="p-button p-component w-max mt-2" type="button" aria-label="Emails 8">' +
                '<span class="p-button-label">Add Variants</span></button>' +
                '</div>'
            );
        },

        // ... other properties ...
    };
},

组件

<template>
    <ag-grid-vue
        class="ag-theme-alpine has-custom-table"
        :detailCellRendererParams="store.detail_cell_renderer_params"
        <!-- Other properties... -->
    >
    </ag-grid-vue>
</template>

现在，我想将一个函数附加到“添加变体”按钮，以添加新变体。我怎样才能将此功能传递给按钮？

Answer 1

您可以使用上下文对象传递函数。这是一个虚拟代码。

function test() {
  alert('Called from detail grid')
}

const VueExample = {
  template: `
    <ag-grid-vue
      <!-- Other properties... -->
      :detailCellRendererParams="detailCellRendererParams"
      <!-- Other properties... -->
    ></ag-grid-vue>
  `,
  components: {
    'ag-grid-vue': AgGridVue,
    customUserCell: CustomUserCell,
  },
  setup(props) {
    // other props
    // other props
    // other props
    const detailCellRendererParams = ref(null);

    const DETAIL_COLUMNS = [
      { field: 'firstName' },
      { field: 'lastName' },
      {
        headerName: 'Actions',
        showRowGroup: 'role',
        filter: false,
        valueGetter: ({ data }) => data,
        cellRenderer: 'customUserCell',
        minWidth: 160,
      },
    ];
    
    onBeforeMount(() => {
      detailCellRendererParams.value = (params) => {
        var res = {};
        // other properties
        // other properties
        res.detailGridOptions = {
          columnDefs: DETAIL_COLUMNS,
          context: {
            functionToBePassed: test
          },
        };
        return res;
      }
    })

    return {
      // other properties
      // other properties
      // other properties
      detailCellRendererParams,
      // other properties
    }
  }
}

自定义UserCell.js

export default {
  template: `<button @click="onClick()">Role Id</button>`,
  setup({ node, columnApi, ...rest }) {
    console.log('node', node);
    console.log('columnApi', columnApi);
    console.log('rest', rest);
  
    const onClick = () => rest.params.context.functionToBePassed();
    return {
      onClick
    };
  },
};

结果