Flex 的getChildren()方法

本文介绍如何使用Flex Container类的getChildren方法来获取指定容器的所有子对象。通过示例代码展示了如何遍历并打印出VBox中所有HBox子元素的名字。

flex Container 类的getChildren方法只能得到调用对象的子对象
例如flex结构

    <mx:VBox id="uploadbox">       
         
<mx:HBox id="file1" paddingTop="10">
                
<mx:ProgressBar id="bar1" visible="true"
                    labelPlacement
="center" 
                    minimum
="0" maximum="100"
                    label
="当前进度: 0%"
                    direction
="right"
                    mode
="manual" width="308"  height="27" />
                   
<mx:Button label="上传" height="27"  click="upload(event);" x="320" y="10"/>
        
</mx:HBox>
         ......  // 此处省略若干HBox
    
</mx:VBox>
    
代码程序

        var hboxChild:Array = uploadbox.getChildren();
                
                for(var i:int=0;i
<hboxChild.length;i++)
                {
                    trace("hboxChild.name
= "+(hboxChild[i] as DisplayObject).name);
                }

结果如下

hboxChild.name= file1            //如果没有设置name属性,则name = id
hboxChild.name= hb_5
hboxChild.name= hb_6
hboxChild.name= hb_7
hboxChild.name= hb_8
hboxChild.name= hb_9
<template> <div class="custom-tree-container"> <!-- 搜索框 --> <el-input v-if="showSearch" v-model="filterText" placeholder="输入关键字过滤" clearable class="tree-search" /> <!-- 树形组件 --> <el-tree ref="treeRef" :data="processedData" :props="mergedProps" :node-key="nodeKey" :lazy="lazy" :load="loadNode" :show-checkbox="showCheckbox" :highlight-current="highlightCurrent" :default-expand-all="defaultExpandAll" :expand-on-click-node="expandOnClickNode" :filter-node-method="filterNode" @node-click="handleNodeClick" @check-change="handleCheckChange" > <!-- 自定义节点内容 --> <template #default="{ node, data }"> <span class="custom-node"> <slot name="prefix-icon" :node="node"> <el-icon v-if="showDefaultIcon"><FolderOpened /></el-icon> </slot> <span class="node-label">{{ node.label }}</span> <slot name="suffix-content" :node="node" :data="data" /> </span> </template> </el-tree> </div> </template> <script setup> import { ref, computed, watch } from 'vue' import { FolderOpened } from '@element-plus/icons-vue' const props = defineProps({ // 原始数据 data: { type: Array, required: true }, // 树形配置项 treeProps: { type: Object, default: () => ({ label: 'label', children: 'children', disabled: 'disabled', isLeaf: 'isLeaf' }) }, nodeKey: { type: String, default: 'id' }, showSearch: Boolean, showCheckbox: Boolean, showDefaultIcon: { type: Boolean, default: true }, highlightCurrent: { type: Boolean, default: true }, defaultExpandAll: Boolean, expandOnClickNode: Boolean, lazy: Boolean, loadFn: Function // 异步加载函数 }) const emit = defineEmits(['node-click', 'check-change', 'data-filtered']) const filterText = ref('') const treeRef = ref(null) // 合并默认配置和自定义配置 const mergedProps = computed(() => ({ ...props.treeProps })) // 数据处理(可根据需要添加转换逻辑) const processedData = computed(() => { // 这里可以添加数据转换逻辑 return props.data }) // 过滤方法 const filterNode = (value, data) => { return data[mergedProps.value.label].includes(value) } // 节点点击事件 const handleNodeClick = (data, node) => { emit('node-click', { data, node }) } // 复选框变化事件 const handleCheckChange = (data, checked, indeterminate) => { emit('check-change', { data, checked, indeterminate }) } // 异步加载节点 const loadNode = async (node, resolve) => { if (typeof props.loadFn === 'function') { const children = await props.loadFn(node) resolve(children || []) } } // 监听搜索过滤 watch(filterText, (val) => { treeRef.value?.filter(val) emit('data-filtered', val) }) // 暴露方法 defineExpose({ getCheckedNodes: () => treeRef.value?.getCheckedNodes(), setCheckedKeys: (keys) => treeRef.value?.setCheckedKeys(keys), filter: (value) => treeRef.value?.filter(value) }) </script> <style scoped> .custom-tree-container { padding: 10px; background: #fff; border-radius: 4px; } .tree-search { margin-bottom: 10px; } .custom-node { display: flex; align-items: center; padding: 5px 0; } .node-label { margin-left: 6px; } :deep(.el-tree-node__content) { height: 36px; } </style> 解析代码,然后告诉我这个组件的懒加载方法该如何在父组件中使用
最新发布
03-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值