element-plus - el-tree props 的自定义节点类名 class 使用问题?

Question

1. 代码

<el-tree
          ref="treeRef"
          class="filter-tree"
          :data="treeDeptData"
          node-key="id"
          :props="defaultProps"
          :default-expand-keys="['1']"
          :filter-node-method="filterNode"
          @node-click="getDeptUser"
        />

defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        disabled: 'disabled',
        class: function(data){
          if(data.disabled){
            return 'tree_node_disabled'
          }
        }
      },

.tree_node_disabled{
        color: #a8abb2;
        cursor: not-allowed;
      }

2. 问题
   以上类名看dom已经绑定成了，但是并没有渲染写的样式 ，哪位大佬知道是什么情况吗

Answer 1

官网有这个属性嘛？

建议还是用scoped slot插槽方式实现：

<el-tree
      :data="data"
      node-key="id"
     >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :class="data.disabled?'tree_node_disabled':''">{{ node.label }}</span>
      </span>
    </el-tree>