el-tree 自定义节点样式

设置el-tree根级节点的样式 ( 照搬自chatgpt )

1、使用node-key属性：在el-tree组件上设置node-key属性，以确保每个节点都有一个唯一的键值。这是为了在自定义节点样式时能够针对特定节点进行选择。

2、自定义渲染函数：创建一个自定义的渲染函数，用于渲染每个节点的内容。在该函数中，你可以根据节点的属性或其他条件来添加自定义的样式。

methods: {
  renderContent(h, { node }) {
    return h('span', {
      // 自定义class类名
      class: 'custom-node',
      // 设置样式(样式权限仅次于 !important，可能会覆盖掉原有定义的其他选择器样式)
      style: {
        color: node.level === 1 ? 'red' : 'black',
        fontWeight: node.isLeaf ? 'bold' : 'normal'
      }
    }, node.label);
  }
}

在上述代码中，我们使用h函数创建一个span元素，并为其添加自定义的类名和样式。我们根据节点的层级和是否为叶子节点来设置不同的颜色和字体粗细。

3、将自定义渲染函数与el-tree组件关联：通过在el-tree组件上设置render-content属性，将自定义渲染函数传递给el-tree组件，以替代默认的节点渲染方式。

<el-tree :data="treeData" 
         :node-key="node => node.id" 
         :render-content="renderContent"
></el-tree>

在上述代码中，我们将自定义的渲染函数renderContent与el-tree组件关联。

4、在样式表中定义自定义节点样式：在你的样式表中定义.custom-node类的样式，以实现自定义节点的外观。

.custom-node {
  font-size: 16px;
  /* 其他样式属性 */
}

如下图所示，为每一处的根级节点设置红色加粗，其他为黑色加粗：

设置el-tree自定义节点样式（借鉴自上述 ↑↑↑↑↑↑ ）

1、首先为每一个tree绑定一个key值，这个值可以定义为id，也可以是别的任何一个属性，但必须是唯一的

<el-tree :data="rightMainTree_data" 
         :node-key="node => node.id" 
         :render-content="renderContent"
></el-tree>


// 或者


<el-tree :data="rightMainTree_data" 
          node-key="id" 
         :render-content="renderContent"
></el-tree>

2、定义data数据

3、设置渲染函数   renderContent

renderContent(h, { node }) {
            console.log(node.key)
            return h('span', {
                style: {
                    color: node.key === 11 || node.key === 32 ? 'red' : '#fff',
                }
            }, node.label);
        },

效果如下：