0

我正在尝试在 ag-grid 组件中使用 font-awesome，但我找不到使用我之前为 Vue 3 安装的 font-awesome 自定义 ag-grid 图标的正确方法。

这是我在 vuejs 3 中使用 font-awesome 的方式：

main.js

import { createApp } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/styles/index.scss'

library.add(fas)

createApp(App)
    .use(router)
    .use(store)
    .component('font-awesome-icon', FontAwesomeIcon)
    .mount('#app')

然后在模板上我使用这样的图标，一切正常：

<button
    class="absolute right-2 mr-1 focus:outline-none focus:ring"
    aria-label="search"
>
    <font-awesome-icon icon="search" />
</button>

现在，按照ag-grid 手册，我创建了一个 BaseGrid 组件，我在其中设置了 ag-grid。为了尝试替换原始的 ag-grid 主题图标，我将属性“icons”传递给组件并尝试替换组件的 beforeMount 方法上的图标：

<template>
    <div>
        <ag-grid-vue
            :columnDefs="columnDefs"
            :icons="icons"
            :rowData="rowData"
            @first-data-rendered="onFirstDataRendered"
            class="ag-theme-alpine"
            defaultColDef="defaultColDef"
            domLayout="autoHeight"
        >
        </ag-grid-vue>
    </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue3'
export default {
    data() {
        return {
            columnDefs: null,
            defaultColDef: { resizable: true },
            rowData: null,
            gridApi: null,
            columnApi: null,
            icons: null,
        }
    },
    computed: {},
    components: {
        AgGridVue,
    },
    mounted() {
        this.rowData = this.$store.getters.rowData
    },
    beforeMount() {
        this.columnDefs = [
            { field: 'status', sortable: true, checkboxSelection: true },
            { field: 'id', sortable: true },
            { field: 'assignee', sortable: true },
            { field: 'brand', sortable: true },
            { field: 'requested', sortable: true },
            { field: 'updated', sortable: true },
            { field: 'subject', sortable: true },
            { field: 'requester', sortable: true },
            { field: 'language', sortable: true },
        ]
        this.icons = {
            sortAscending: '<font-awesome-icon icon="user-secret" />',
            sortDescending: '<font-awesome-icon icon="user-secret" />',
        }
    },
    methods: {
        onFirstDataRendered(params) {
            params.api.sizeColumnsToFit()
        },
    },
}
</script>

所以这里的问题在于 ag-grid 需要传递新图标的方式，这就像一个字符串，如果你看到这部分代码：

    this.icons = {
        sortAscending: '<font-awesome-icon icon="user-secret" />',
        sortDescending: '<font-awesome-icon icon="user-secret" />',
    }

这是“工作”，因为我在标记中确实有“ <font-awesome-icon icon="user-secret" />”作为字符串，但正如您可以想象的那样，这不是我想要的工作方式，因为没有显示字体真棒图标。我的问题是，如果有什么方法可以让我的字体真棒实现与 ag-grid 一起工作，还是我必须改变我的方法才能用字体真棒的图标替换 ag-grid 原始图标？

4

0 回答 0