element-ui树形 数据嵌套处理

@check="check"



import * as _ from 'underscore';//引入underscore
check(e1, e2) {
    let oridata = e2.checkedNodes;
    let halfs = this.$refs.searchTree.getHalfCheckedNodes(true);
    halfs.map((item) = >{
        oridata.push({
            isLeaf: item.isLeaf,
            orgCode: item.orgCode,
            orgLevel: item.orgLevel,
            orgName: item.orgName,
            parent: item.parent,
            parentLevel: item.parentLevel
        })
    });
    let tdata = _.map(oridata, (item_) = >{
        item_.data = _.filter(oridata, (subItem_) = >{
            if (!subItem_.parent) return false;
            return subItem_.parent === item_.orgCode;
        })
    });

    let outData = _.filter(oridata, (item_) = >{
        return ! _.findWhere(oridata, {
            orgCode: item_.parent
        })
    });

    this.checkData = {
        checkedKeys: e2.checkedKeys,
        checkedNodes: outData
    }
}

 

### Element-UI 中实现多选框嵌套树形选择的方法 在 `Element-UI` 的场景下,可以通过组合使用 `el-select` 和 `el-tree` 或者直接利用 `el-table` 来实现多选框嵌套树形选择的功能。以下是具体的实现方式以及示例代码。 #### 方法一:基于 `el-select` 和 `el-tree` 通过自定义插槽的方式,在 `el-select` 组件中嵌入一个 `el-tree`,从而实现树形结构的选择器[^1]。 ```vue <template> <el-select v-model="selectedValues" multiple style="width: 100%;"> <el-option v-for="item in treeData" :key="item.value" :label="item.label" :value="item.value"> <!-- 自定义选项 --> <el-tree ref="tree" :data="item.children" show-checkbox node-key="id" default-expand-all highlight-current /> </el-option> </el-select> </template> <script> export default { data() { return { selectedValues: [], treeData: [ { value: 'parent1', label: 'Parent Node 1', children: [ { id: 1, label: 'Child Node 1' }, { id: 2, label: 'Child Node 2' } ] }, { value: 'parent2', label: 'Parent Node 2', children: [ { id: 3, label: 'Child Node 3' }, { id: 4, label: 'Child Node 4' } ] } ] }; } }; </script> ``` 这种方法适合简单的树形选择需求,但如果需要更复杂的交互逻辑,则可以考虑方法二。 --- #### 方法二:基于 `el-table` 实现树形表格与多选框的结合 如果希望实现更加灵活的树形结构,并且支持父子节点之间的联动操作(如全选、反选等),可以直接使用 `el-table` 并设置 `show-checkbox` 属性[^2]。 ```vue <template> <el-table :data="tableData" row-key="id" border lazy :load="loadChildren" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'Parent Node 1', hasChildren: true }, { id: 2, name: 'Parent Node 2', hasChildren: true } ], allSelectedRows: [] }; }, methods: { loadChildren(tree, treeNode, resolve) { setTimeout(() => { resolve([ { id: `${tree.id}-child1`, name: `${tree.name} Child 1` }, { id: `${tree.id}-child2`, name: `${tree.name} Child 2` } ]); }, 1000); }, handleSelectionChange(selection) { this.allSelectedRows = selection; } } }; </script> ``` 该方案特别适用于复杂的数据展示场景,比如带有懒加载特性的树形表格或多层嵌套数据--- #### 方法三:基于 `el-cascader` 实现多选模式下的树形选择 对于一些特定的需求,还可以借助 `el-cascader` 提供的多选功能来完成类似的树形选择效果[^1]。 ```vue <template> <el-cascader v-model="selectedOptions" :options="cascaderOptions" :props="{ checkStrictly: true }" clearable filterable collapse-tags multiple></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], cascaderOptions: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则' }, { value: 'daohang', label: '导航' } ] }, { value: 'zujian', label: '组件', children: [ { value: 'basic', label: 'Basic' }, { value: 'form', label: 'Form' } ] } ] }; } }; </script> ``` 这种方式的优点在于配置简单,尤其适合层级较少的树形结构--- ### 总结 以上三种方法分别针对不同的业务场景提供了可行的解决方案: - **方法一** 更加贴近传统的下拉菜单形式; - **方法二** 则更适合用于大规模数据展示和复杂交互; - **方法三** 是一种轻量化的替代方案,适合快速搭建原型或小型应用。 具体选用哪种方式取决于实际项目的复杂度和技术栈的要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三木森森の

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值