element tree获取半选id和全选id 和回显半选id加全选id

// heml el-tree 需要配置node-key

<el-tree
  ref="treeData"
  class="treeClass"
  node-key="id"
  default-expand-all
  show-checkbox
></el-tree>


// 获取半选和全选 
// 获取所有的复选框已经勾选的id
getAllCheckedKeys(list) {
 const defaultCheckedKeys = [];
 // 获取ref
 const treeDataRef = this.$refs.treeData;
 // 返回半选和全选的数据
 // getCheckedNodes:全选的集合,getHalfCheckedNodes半选的集合
 const treeDataList = [...treeDataRef.getCheckedNodes(), ...treeDataRef.getHalfCheckedNodes()];
 return defaultCheckedKeys;
},

// 对半选和全选的进行反选
async initCheckoutTree() {
  // 初始化需要等dom元素加载完毕以后在进行获取ref
  await this.$nextTick();
  // defaultCheckedKeys:后端返回的选中id [1,3,4,56,7,8,9,223]
  const treeDataRef = this.$refs.treeData;
  for (const key of this.defaultCheckedKeys) {
  	// getNode(获取tree中对应的节点)
    const node = treeDataRef.getNode(key);
    // isLeaf(判断节点是否为叶子节点)
    // 如果存在isLeaf 代表是叶子节点为最后一级那么就选中即可 不是则不选择
    if (node?.isLeaf) {
      // setChecked (设置tree中对应的节点为选中状态)
      treeDataRef.setChecked(node, true);
    }
  }
},


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果您想要在 `el-tree` 组件中实现全选半选同时存在,并且勾选功能正常工作,您可以使用以下步骤来实现: 1. 首先,确保您的数据源中的每个节点都有一个唯一的标识符(例如 `id`)。 2. 在组件的 `data` 中,定义一个数组来存储已选择的节点的标识符。例如,命名为 `selectedKeys`。 ```javascript data() { return { selectedKeys: [], // 存储已选择节点的标识符 }; }, ``` 3. 在 `el-tree` 组件上设置 `v-model` 绑定,将 `selectedKeys` 数组与组件的选中节点进行双向绑定。同时,通过设置 `node-key` 属性,将节点标识符的字段名告知组件。 ```html <el-tree v-model="selectedKeys" :data="treeData" :load="lazyLoad" :lazy="true" :node-key="id" // 将节点标识符的字段名告知组件 :show-checkbox="true" // 显示复选框 :check-strictly="false" // 允许半选状态 ></el-tree> ``` 4. 在组件的 `mounted` 钩子函数中,将已选择的节点标识符设置到 `selectedKeys` 数组中。 ```javascript mounted() { // 将已选择的节点标识符设置到 selectedKeys 数组中 this.selectedKeys = /* 包含已选择节点标识符的数组 */; }, ``` 这样,`el-tree` 组件将在载完成时,根据 `selectedKeys` 数组中的节点标识符,正确显示全选半选和未选中的状态,并且可以正常勾选节点。 请注意,根据您的数据结构和业务逻辑,需要相应地调整 `selectedKeys` 数组的初始化和维护逻辑,以实现正确的勾选状态。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值