首页el-tree-transfer子级穿梭

el-tree-transfer子级穿梭

时间: 2025-02-18 10:44:43 浏览: 84

### el-tree-transfer 组件子级穿梭框使用方法 #### 子级穿梭框概述 el-tree-transfer 是一个基于 Vue 和 Element-UI 的树形穿梭框组件，允许用户在两个面板之间选择并转移树状结构的数据项。该组件支持多种配置选项来满足不同的业务需求。 #### 基本属性设置为了启用子级穿梭功能，需确保 `props` 属性被正确配置以反映父子关系字段名称，并通过 `defaultCheckedKeys` 或者交互操作选中父节点时自动展开其下的所有子节点[^2]。 ```javascript const props = { label: 'name', children: 'zones' }; ``` #### 自动勾选子节点当希望点击父节点时能够全选或取消所辖全部子节点，则应开启 `checkStrictly=false` 参数，默认情况下此参数即为 false 表示存在关联性检查行为。 ```html <template> <div id="app"> <el-tree-transfer :data="data" v-model="value" :props="props"></el-tree-transfer> </div> </template> <script> export default { name: "App", data() { return { value: [], props: { checkStrictly: false }, data: [ // 数据源... ] }; } }; </script> ``` #### 动态加载更多数据如果遇到大数据量场景下性能瓶颈问题，可以考虑采用懒加载方式获取未显示部分的子集信息，在每次触发相应事件（如节点展开）后再请求接口拉取新一批记录填充至当前层级之下[^1]。 ```javascript loadNode(node, resolve) { if (node.level === 0) { return resolve([ /* 初始顶层节点 */ ]); } setTimeout(() => { const nodes = Array.from({ length: Math.ceil(Math.random() * 5) }, (_, i) => ({ title: `${node.data.title}-${i}`, leaf: true }) ); resolve(nodes); }, 500); } ```

阅读全文