美文网首页
el-tree懒加载叶子结点不展示icon

el-tree懒加载叶子结点不展示icon

作者: 肥羊猪 | 来源:发表于2021-06-18 10:54 被阅读0次

    全局样式:

    .el-tree-node__expand-icon.is-leaf {
      display:none;
    }
    

    data:

    defaultProps: {
            children: "child", // 节点是否拥有子节点
            label: "orgName", // 节点渲染时的显示的名字
            value: "orgCode",
            isLeaf: (data, node) => {
              if (data.storeType === 1) { // 实体门店 叶子结点 不展示icon
                return true
              }
            }
          }, // 判断显示节点icon
          treeData: [], // 树数据
    

    html:

              <el-tree class="filter-tree" lazy :load="loadNode" :data="treeData" node-key="id" :props="defaultProps" highlight-current :filter-node-method="filterNode" ref="tree"  @node-click="handleNodeClick">
                <div class="custom-tree-node " slot-scope="{ node }">
                  <div>
                    <span style="margin-right: 10px">{{ node.label }}</span>
                    <el-tag v-if="node.data.storeType === 1" size="mini" type="success">门店</el-tag>
                  </div>
                </div>
              </el-tree>
    

    methods:

    // 监听节点的展开事件并进行懒加载
        async loadNode(node, resolve) {
          // 一级节点处理
          if (node.level === 0) {
            this.treeData = await OrganizateTree(1); // 首次加载一级节点数据函数
            resolve(this.treeData);
          }
          // 其余节点处理
          if (node.level >= 1) {
            const res = await OrganizateTree(node.data.orgCode); // 获取该节点下的字节点
            resolve(res);
          }
        },
    

    相关文章

      网友评论

          本文标题:el-tree懒加载叶子结点不展示icon

          本文链接:https://www.haomeiwen.com/subject/aajkyltx.html