ag-grid-vue 自定义cell

在 ag-Grid Vue 中，自定义单元格（custom cell）允许你根据数据内容动态渲染 HTML 或使用自定义组件。这为创建交互式和复杂的表格提供了很大的灵活性。以下是实现自定义单元格的一些关键步骤：

1. **列定义**：
在 ag-Grid Vue 中，你需要在列配置中指定`cellRenderer`属性，设置为一个函数或Vue组件，这个函数或组件将会被用来渲染每个单元格的内容。

<ag-grid-vue
  :columnDefs="[
    { headerName: 'Name', field: 'name', cellRenderer: customCellRenderer },
    // 其他列定义
  ]"
/>

2. **定制渲染函数**：
如果你想用函数，你可以这样写：

   function customCellRenderer(params) {
     return `<span>${params.value}</span>`;
   }

3. **Vue组件**：
使用 Vue 组件时，确保你在列配置中设置`cellRendererParams`，它将包含所有必要的数据和上下文信息：

   const CustomCellComponent = {
     template: '<div>{{ value }}</div>',
     props: ['value']
   };

   function customCellRenderer(params) {
     return Vue.extend(CustomCellComponent).options.render.call(this, params);
   }

4. **访问值和事件处理**：
在组件内部，你可以访问单元格的数据(`params.value`)，并可以添加事件监听器处理用户交互。

5. **传递事件和数据**：
如果需要从单元格触发事件或者传递数据到父组件，可以在组件上添加`@click`等事件，并通过`$emit`发送事件。

6. **样式和布局**：
自定义单元格可以根据需要使用 CSS 来控制样式和布局，确保与 ag-Grid 的样式体系兼容。