美文网首页
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

    全局样式: data: html: methods:

  • el-tree懒加载

    参考链接:https://www.jianshu.com/p/3406341b2e15[https://www.j...

  • element el-tree懒加载

    其中 node-key 绑定值为唯一的id,点击时获取到的也是这个值。 props 绑定的值中,label对应的是...

  • el-tree懒加载并过滤

    filterNode(value, data, node) {// 包装成arraydata = [data];i...

  • vant ui中 PullRefresh and List

    需求:展示(用户)账户的明细,需要懒加载和下拉刷新效果(List实现懒加载,PullRefresh实现下拉刷新) ...

  • Android 懒加载

    1、fragment 懒加载 防止viewpager在未展示fragment的时候去加载数据https://ww...

  • 项目优化

    图片懒加载,数据懒加载, 路由懒加载 1.图片懒加载原理 1.1 开始时 不设置src属性 1.2 图片在可视区域...

  • 动态切换普通模式和懒加载模式

    这个在开发过程中,需要切换的模块,在初始化时是懒加载模式,在搜索时是普通模式,当时通过动态设置l...

  • Android 使用Icon Font

    Icon Font就是将一些单色图标作为字体放到字体库中,当应用运行时加载自定义字体库将其展示出来。Icon Fo...

  • 懒加载

    知识点 webpack代码拆分动态倒入懒加载 1.懒加载 懒加载我们都知道,不即时加载所有资源,而是在需要的时候才...

网友评论

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

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