判断层级代码

只有Node节点才可以添加on事件的侦听。




关于数组sort的代码的运用
var ob=[{age:99},{age:9},{age:399},{age:199}]
        ob.sort(function(a,b){
            return a.age > b.age?1:-1
        })
        cc.log('???', ob.toString())
打印出来的结果是根据age的大小进行从低到高的排列






老师写的判断层级的代码。
onLoad: function () {
        this.schedule(this._sortByY.bind(this), 0.1)
    },
    _sortByY:function(){
        var arr = this.npcLayer.getChildren()
        arr.sort(function(a,b){
            return a.y < b.y            
        })
        for(var i=0;i<arr.length;i++){
            arr[i].zIndex  = i
        }
    }


自己写的判断层级的代码       
    judge: function(arr){
       for(var i = 0; i < arr.length - 1; i++){
            if(arr[i].y < arr[i+ 1].y){
                var temp = arr[i]
                arr[i] = arr[i + 1]
                arr[i + 1] = temp
            }
        }
        this.scheduleOnce(function(){
            for(var i = 0 ; i < arr.length; i++){
                arr[i].setLocalZOrder(i)
            }
        },1/60)
        
    },
    update: function(){
        var arr = this.NPC.getChildren()
        this.judge(arr)
    },


### 在 Element UI 的 `el-table` 中实现或判断三级列表的层级结构 为了在 `el-table` 中实现或判断三级列表的层级结构,可以通过以下几种方式来处理数据和样式以满足需求。 #### 利用自定义列渲染实现层级缩进 通过计算每一行的数据深度,在模板中动态添加左侧缩进量或者图标表示其所属级别。这种方法直观易懂,并且能够很好地适应不同级别的嵌套情况[^1]。 ```html <template slot-scope="scope"> <span :style="{ marginLeft: `${scope.row.level * 20}px` }">{{ scope.row.name }}</span> </template> ``` 此代码片段展示了如何根据每条记录中的 level 字段决定名称前缀空白区域大小,以此区分各个节点所处位置[^1]。 --- #### 设置展开折叠按钮并加载子项 对于具有父子关系的数据集来说,可以采用懒加载的方式按需获取下一层的内容。这样既能减少初始请求负担又能提升用户体验感[^2]。 首先需要准备一个带有 children 属性的对象数组作为基础资料源;其次开启 tree-props 配置选项指定 child-key 名字以便框架识别哪些字段代表分支节点及其后代成员;最后记得注册 row-click 方法监听点击动作触发对应逻辑更新视图状态[^2]。 ```javascript data() { return { tableData: [{ id: 1, name: 'Parent', children: [] }], lazyLoadTree: true }; }, methods: { load(tree, treeNode, resolve) { setTimeout(() => { const nodes = Array.from({ length: Math.random() * 5 | 0 }, (_, i) => ({ id: Date.now() + '_' + i, name: `Child ${i}` }) ); resolve(nodes); }, 1000); } } ``` 接着绑定到组件属性里去: ```html <el-table :data="tableData" row-key="id" default-expand-all :tree-props="{children: 'children'}" @row-click="handleRowClick" v-if="lazyLoadTree"> <!-- Columns Definition --> </el-table> ``` 这里需要注意的是,只有当设置了 `default-expand-all=true` 才会让所有顶层项目自动打开查看它们下面可能存在的内容[^2]。 --- #### 调整固定列的行为避免多重表格生成带来的性能损耗 正如之前提到过的那样,如果同时存在多个方向上的锁定列,则最终会在 DOM 结构里面创建额外数量的真实 HTML `<table>` 元素实例出来用于模拟滚动效果下的视觉稳定性[^3]。因此建议尽量只保留一侧固定的配置除非确实有必要这样做才能获得理想的交互体验[^3]。 另外也可以尝试调整某些特定参数比如 border 或 stripe 来改变整体外观风格从而掩盖掉因为技术局限而导致的小瑕疵现象[^3]。 --- ### 总结 以上介绍了三种主要策略用来构建具备清晰分层特性的表格控件——分别是运用内联样式控制文本偏移距离反映组织架构信息、借助异步回调机制逐步填充关联实体集合以及合理规划布局安排降低资源消耗风险等方面进行了深入探讨分析。希望能够对你有所帮助! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值