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

Question

目前我正在为传统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);
}
}

Answer 1

在重新阅读这篇有趣的文章后，我终于找到了解决方案。

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);
}
}

不过，我不知道这是否是理想的解决方案。所以，如果你有一个更好、不那么复杂的解决方案，请随时告诉我。