uni-app选择最后一层的时候不带上上级呀

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app选择最后一层的时候不带上上级呀

选择最后一层的时候不带上上级呀,只想拿到最后选择的

1 回复

在uni-app中,如果你希望在用户选择树形结构数据中的某一节点时,只获取该节点而不包含其上级节点,可以通过事件处理和数据处理逻辑来实现。下面是一个简单的代码示例,展示了如何实现这一功能。

假设你有一个树形结构的数据,如下:

const treeData = [
    {
        id: 1,
        name: 'Node 1',
        children: [
            {
                id: 2,
                name: 'Node 1-1',
                children: [
                    {
                        id: 3,
                        name: 'Node 1-1-1',
                    },
                ],
            },
        ],
    },
    // 更多节点...
];

在你的uni-app页面或组件中,你可以使用uni.chooseMessageFile(这里仅为示例,实际选择树节点可能通过自定义组件或列表实现)来模拟选择节点,并处理选择结果。以下是一个简化的实现:

<template>
    <view>
        <tree-view :tree-data="treeData" @node-click="handleNodeClick"></tree-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            treeData: [/* 树形数据如上 */],
        };
    },
    methods: {
        handleNodeClick(node) {
            // 这里只处理点击的节点,不带上上级
            console.log('Selected Node:', node);
            // 你可以在这里执行其他逻辑,比如发送请求等
        },
    },
    components: {
        'tree-view': {
            props: ['treeData'],
            methods: {
                renderNodes(nodes, level = 0) {
                    return nodes.map(node => {
                        const indent = ' '.repeat(level * 2); // 用于缩进显示
                        return `
                            <view class="node" @click="${this.handleNodeClick.bind(this, node)}">
                                ${indent}${node.name}
                            </view>
                            ${node.children ? this.renderNodes(node.children, level + 1) : ''}
                        `;
                    }).join('');
                },
                handleNodeClick(node) {
                    this.$emit('node-click', node);
                },
            },
            mounted() {
                this.$el.innerHTML = this.renderNodes(this.treeData);
            },
            template: '<div></div>', // 使用innerHTML渲染,因此template为空
        },
    },
};
</script>

在这个示例中,tree-view组件递归地渲染树形结构,并为每个节点绑定点击事件。当用户点击某个节点时,只触发该节点的点击事件,并传递该节点对象给父组件处理,而不包含其上级节点信息。这样,你就可以在父组件的handleNodeClick方法中处理所选节点,而不必担心上级节点信息的干扰。

回到顶部