如何在vue js中添加AG网格自定义标题中的图标

<template>
  <div class="custom-header">
    <span class="title">{{ column.displayName }}</span>
    <i :class="iconClass"></i>
  </div>
</template>

<script>
export default {
  props: {
    column: {
      type: Object,
      required: true
    }
  },
  computed: {
    iconClass() {
      // 根据你的需求，可以根据列的属性来动态设置图标的class
      // 例如，如果列的属性为'edit'，可以返回'fa fa-pencil'来显示编辑图标
      // 如果列的属性为'delete'，可以返回'fa fa-trash'来显示删除图标
      // 这里只是示例，你可以根据实际需求进行修改
      return 'fa fa-pencil';
    }
  }
};
</script>

<style scoped>
.custom-header {
  display: flex;
  align-items: center;
}

.title {
  margin-right: 5px;
}
</style>

<template>
  <div>
    <ag-grid-vue
      :columnDefs="columnDefs"
      :rowData="rowData"
      :frameworkComponents="frameworkComponents"
    ></ag-grid-vue>
  </div>
</template>

<script>
import CustomHeader from './CustomHeader.vue';

export default {
  components: {
    'custom-header': CustomHeader
  },
  data() {
    return {
      columnDefs: [
        {
          headerName: 'Column 1',
          field: 'col1',
          headerComponent: 'custom-header'
        },
        // 其他列定义...
      ],
      rowData: [
        // 行数据...
      ],
      frameworkComponents: {
        'custom-header': 'custom-header'
      }
    };
  }
};
</script>