element树组件父子关联

el-tree组件父子关联问题

el-tree选了父节点后,子节点均会选中,子节点都取消之后,父节点也取消,导致不选择子节点就无法选择父节点
解决:取消父子关联关系
element配置

:check-strictly="true"

这样父、子节点完全不关联,勾选毫无关系。
但是业务需求是,要勾选子节点必须先勾选父节点
于是写了@check方法,在勾选子节点时,自动勾选父节点

<el-tree
  :data="menuOptions"
  show-checkbox
  ref="menu"
  node-key="id"
  :check-strictly="true"
  @check="getCurrentNode"
  empty-text="加载中,请稍后"
  :props="defaultProps"
  :default-checked-keys="defaultCheckedKeys"
></el-tree>
getCurrentNode(data) {
  const node = this.$refs.menu.getNode(data);
  this.childNodes(node);
  this.parentNodes(node);
},
childNodes(node) {
  const len = node.childNodes.length;
  for (let i = 0; i < len; i += 1) {
    node.childNodes[i].checked = node.checked;
    this.childNodes(node.childNodes[i]);
  }
},
parentNodes(node) {
 if (node.parent) {
    for (const key in node) {
      if (key === 'parent') {
        node[key].checked = true;
        this.parentNodes(node[key]);
      }
    }
  }
},
### el-tree 组件父子节点的关联方式 在 VueElement UI 中,`el-tree` 组件用于展示形结构的数据。为了实现父子节点之间的关联,通常会利用 `children` 属性来定义子节点,并通过特定属性如 `isLeaf` 或者自定义逻辑判断叶子节点。 #### 数据结构设计 对于形数据而言,每一项都应具备唯一标识符(通常是 `id`),以及指向其下级项目的数组字段(一般命名为 `children`)。这种层次化的嵌套结构能够自然地表达出父与子的关系[^1]。 ```json [ { "id": 1, "label": "Parent Node", "children": [ {"id": 2, "label": "Child Node A"}, {"id": 3, "label": "Child Node B"} ] } ] ``` #### 使用 props 自定义配置 Element 的 Tree 组件允许开发者通过 `props` 参数来自定义节点标签、孩子集合等名称,默认情况下分别为 `label` 和 `children`。如果实际使用的 JSON 结构不同,则需调整此参数以匹配真实情况。 ```javascript <template> <el-tree :data="treeData" node-key="id" :props="defaultProps"></el-tree> </template> <script> export default { data() { return { treeData: [...], // 型数据源 defaultProps: { children: 'subItems', // 假设JSON中的键名为 subItems 表示子集 label: 'title' // 同理 title 字段表示显示的文字 } }; }, }; </script> ``` #### 动态加载子节点 当面对大规模数据时,可以考虑按需懒加载的方式优化性能。此时可通过监听展开/折叠事件,在适当时候发起异步请求获取对应分支下的具体内容。 ```vue <template> <el-tree ref="tree" lazy show-checkbox :load="loadNode" :props="{ value: 'id', label: 'name', isLeaf: 'leaf' }"> </el-tree> </template> <script> methods:{ loadNode(node, resolve){ if (node.level === 0) { return resolve([{ id: 1, name: 'root'}]); } setTimeout(() => { const nodes = Array.from({ length: Math.floor(Math.random()*5)+1 }) .map((_, i)=> ({ id:`${node.data.id}-${i}`, name:`child-${i}` })); resolve(nodes); }, 500); } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值