Vue2中Ag-Grid结合GraphQL实现图文单元格的技术问询

我正在测试Ag-Grid是否适配我的Vue2开发需求，参考了Ag-Grid的「Cells with Images and Text」示例。目前我通过以下GraphQL接口获取数据填充表格：

obterImobiliarios() {
    this.$api.query({
        query: gql`{ imobiliarios { idImobiliario inscricaoImobiliario enderecoImobiliario
            numeroImobiliario bairroImobiliario nomeProprietarioImobiliario  } }`,
        fetchPolicy : 'network-only'
    }).then(resultado => {
        this.imobiliarios = resultado.data.imobiliarios
        this.rowData = resultado.data.imobiliarios
        this.$store.getters.rowData = resultado.data.imobiliarios 
        this.erros = null
    }).catch(e => {
        this.erros = e
    })
},

我的服务器文件夹中存储了与idImobiliario对应的图片（例如foto1.png，数字1对应idImobiliario的值），现在希望idImobiliario列同时显示文本（id值）和对应图片，请问该如何调整GraphQL调用并实现这个需求？

一、GraphQL调用调整（可选） #

如果服务器没有返回图片相关字段，不需要修改当前的GraphQL查询——图片路径可以直接通过idImobiliario拼接生成（比如/server-images/foto${idImobiliario}.png）。

如果后续服务器支持返回图片完整路径或文件名，可以在查询中新增字段（比如fotoImobiliario），修改后的查询如下：

query: gql`{ imobiliarios { idImobiliario inscricaoImobiliario enderecoImobiliario
    numeroImobiliario bairroImobiliario nomeProprietarioImobiliario fotoImobiliario } }`

二、Ag-Grid自定义单元格渲染实现 #

在Vue2的Ag-Grid中，有两种方式实现文本+图片的单元格展示：

方式1：创建独立的自定义渲染组件 #

比如新建IdWithImageRenderer.vue组件：

<template>
  <div class="id-with-image">
    <img 
      :src="getImageUrl()" 
      alt="Imóvel" 
      class="cell-image"
      @error="handleImageError"
    />
    <span>{{ params.value }}</span>
  </div>
</template>

<script>
export default {
  props: ['params'],
  methods: {
    getImageUrl() {
      // 替换为你的服务器图片实际路径
      return `/static/imagens/foto${this.params.value}.png`;
      // 如果从GraphQL获取了图片字段，就用：
      // return this.params.data.fotoImobiliario;
    },
    handleImageError(e) {
      // 图片加载失败时显示默认图
      e.target.src = '/static/imagens/default.png';
    }
  }
};
</script>

<style scoped>
.id-with-image {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cell-image {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
}
</style>

然后在表格组件中注册并使用该渲染器：

import IdWithImageRenderer from './IdWithImageRenderer.vue';

export default {
  components: {
    IdWithImageRenderer
  },
  data() {
    return {
      columnDefs: [
        {
          headerName: 'ID Imóvel',
          field: 'idImobiliario',
          cellRendererFramework: 'IdWithImageRenderer'
        },
        // 其他列配置
        { headerName: 'Inscrição', field: 'inscricaoImobiliario' },
        { headerName: 'Endereço', field: 'enderecoImobiliario' },
        // ...剩余列
      ],
      rowData: []
    };
  },
  // 你的obterImobiliarios方法保持不变
};

方式2：使用函数式渲染（无需单独组件） #

如果不想创建独立组件，可以直接在列配置中写cellRenderer函数：

columnDefs: [
  {
    headerName: 'ID Imóvel',
    field: 'idImobiliario',
    cellRenderer: (params) => {
      return `
        <div style="display:flex;align-items:center;gap:8px;">
          <img 
            src="/static/imagens/foto${params.value}.png" 
            alt="Imóvel" 
            style="width:30px;height:30px;object-fit:cover;border-radius:4px;"
            onerror="this.src='/static/imagens/default.png'"
          />
          <span>${params.value}</span>
        </div>
      `;
    }
  },
  // 其他列配置...
]

注意事项 #

• 确保服务器的图片文件夹已配置静态资源访问权限，否则图片会加载失败；
• 根据实际业务场景调整图片尺寸、间距等样式；
• 若有大量数据，推荐使用组件式渲染（方式1），比函数式渲染更易维护和调试。

内容的提问来源于stack exchange，提问作者Tiago