如何针对某个组件添加自定义样式？

在节点编程页面中，待页面加载完成后，可以添加转换器，并采用原生 DOM 操作方式来定制组件的样式。

案例

本案例是给分页列表组件的分页器总条数添加红色字体样式。

实现步骤

1. 准备工作

确保节点编程页面中包含以下组件：

• 全局节点：用于监听页面加载完成事件。

• 转换器：用于动态添加CSS样式。

• 分页列表组件：用于展示数据并包含分页器。

2. 按下图顺序连接组件。

3. 在转换器节点中，通过JavaScript动态创建style标签并插入到页面中，为分页器总条数添加红色字体样式。

var dom = document.createElement('style');
dom.type = 'text/css';

dom.innerHTML =
  '#dcb420fb_d61d_478f_8b98_4bb55a370ad1 .dv-table-component .dv-table-page-dark .el-pagination .el-pagination__total{ color: red }';
document.getElementsByTagName('head')[0].appendChild(dom);
return true;

注意

#dcb420fb_d61d_478f_8b98_4bb55a370ad1 是分页列表组件的ID，请根据实际ID替换。 确保分页列表组件的ID正确，否则样式不会生效。

4. 点击保存->预览，可查看具体效果。

注意事项

• 组件ID：确保转换器节点中使用的分页列表组件ID与实际ID一致。

• 样式优先级：如果页面中已有其他样式影响分页器总条数，可能需要调整CSS选择器的优先级。

总结

本案例展示了如何利用全局节点监听页面加载事件，并通过转换器动态插入CSS样式，最终实现分页器总条数字体颜色的修改。此方法适用于需要动态修改组件样式的场景，能够提升页面的可定制性和用户体验。