在Vue.js中将CoreUI图标添加到DevExtreme dxDataGrid列标题中

如何解决在Vue.js中将CoreUI图标添加到DevExtreme dxDataGrid列标题中

当前，我正在为旧版API开发新的UI。不幸的是，这提供了列标题的HTML源代码。此代码通常创建一个FontAwesome图标。该库将不会在新项目中使用。

我在CoreUI的图标库中找到了一个非常相似的图标。现在只需要在此时渲染图标即可。但是，到目前为止，还没有成功的方法。如何替换headerCellTemplate方法中的图标？

或者也许有一种完全不同的，更好的方法来做到这一点。我不知道这种方法是否正确。您可能可以使用静态模板，但我不知道该怎么做。

import { CIcon } from '@coreui/vue';
import { cilCheckCircle } from '@coreui/icons';

headerCellTemplate: (element,info) => {
    element.innerHTML = curr.ColumnTitle;
    if (element.firstChild.nodeName === 'I') {
        // WORKS
        //element.firstChild.innerHTML = 'Done';

        // ANOTHER EXPERIMENT
        //const componentClass = Vue.extend(cilCheckCircle);
        //const instance = new componentClass();
        //instance.$mount();
        //element.removeChild(element.firstChild);
        //element.appendChild(instance.$el);

        // ALSO NOT WORKING
        return CIcon.render.call(this,cilCheckCircle);
    }
}

解决方法

重新访问this interesting article后，我终于找到了解决方案。

import Vue from 'vue';
import { CIcon } from '@coreui/vue';
import { cilCheckCircle } from '@coreui/icons';

headerCellTemplate: (element,info) => {
    element.innerHTML = curr.ColumnTitle;

    if (element.firstChild.nodeName === 'I') {
        const cIconClass = Vue.extend(CIcon);
        const instance = new cIconClass({
            propsData: { content: cilCheckCircle }
        });
        instance.$mount(element.firstChild);
    }
}

不过，我不知道这是否是理想的解决方案。如果您有更好，更简单的解决方案，请随时告诉我。