vue.js - 将 CoreUI 图标添加到 Vue.js 中的 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);
}
}
解决方案
重温这篇有趣的文章后,我终于找到了解决方案。
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);
}
}
不过,我不知道这是否是理想的解决方案。如果您有更好、更简单的解决方案,请随时告诉我。
推荐阅读
- c - 在 C 中用 'c' 替换 ','
- css - React 组件的样式与其他组件的样式冲突
- php - 多步表单 PHP Laravel
- javascript - 从 Vue 方法切换侧边栏?
- python - 将数据帧的标题拖放/移动到第一行
- sql - 从地址sql查询中分离机构名称和电话
- excel - 在 VB 运行时启动后仅显示 Excel 启动画面
- javascript - 呈现 HTML 模板并使用它发送上下文,但获取响应未读取上下文并显示有关 JSON 的错误
- vb.net - Visual Studio IDE - 从我的代码中删除标题 0
- php - 具有固定位置和内联块的多重回显/打印