el-tree：如何实现自定义节点或者整体背景颜色自定义

Posted 2023-04-24

参考技术A

如果再采用自定义节点的方式来修改背景颜色，会出现下图的问题，前面部分无法渲染颜色

1、首先console.log(this.$refs.tree)，不难发现，根本无法通过class来直接区分节点属于哪个级别，但是treeItems的数据是有序的，可以根据index来区分。

2、所以，我们首先要做的第一步是将树形结构的数据转换成list

3、然后，我们可以从下图发现，从这里可以控制style。

4、在挂载页面时，等DOM加载完，遍历list即可

DevExpress的TreeList实现自定义节点NodeCell的背景颜色和前景色

场景

DevExpress的TreeList怎样设置数据源使其显示成单列树形结构：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102742426

在上面设置TreeList的数据源并设置其为树形结构后，如果想要自定义NodeCell的背景色和前景色。

效果如下

 

 

注：

博客主页：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

通过重写treelist的CustomDrawNodeCell事件来实现

treeList.CustomDrawNodeCell -= treeList_CustomDrawNodeCell;
treeList.CustomDrawNodeCell += treeList_CustomDrawNodeCell;

然后在重写的事件中

        private static void treeList_CustomDrawNodeCell(object sender, DevExpress.XtraTreeList.CustomDrawNodeCellEventArgs e)
        {
            //确定列的名字不为空
            if (e.Column.Name.ToString() != null)
            {

                    Color color = new Color();
             //获取要设置的颜色--通过e.CellValue获取当前node节点的值，然后在字典映射中获取要设置的color对象
                    Global.Instance.CurveComColorMapping.TryGetValue(e.CellValue.ToString(), out color);
                    //设置背景色
                    e.Appearance.BackColor = color;
                    //设置开启背景色
                    e.Appearance.Options.UseBackColor = true;
                    //设置前景色
                    e.Appearance.ForeColor = Color.White;
                    //设置开启前景色
                    e.Appearance.Options.UseForeColor = true;
                
            }
        }

注：

上面的是通过e.CellValue来获取节点的值，然后通过提前设置好的节点与颜色的映射来获取要设置的颜色。

键值对的映射定义如下

private Dictionary<string, System.Drawing.Color> _curveComColorMapping = new Dictionary<string,System.Drawing.Color>();

这样就能实现根据配置好的节点与颜色的对应关系将节点设置为不同的颜色。