Vue中将树形结构默认选中到第三层

树形结构及数据:

主要是通过node-key="id"和 :default-expanded-keys="isArr"

根据isArr中存放的id值将isArr存在的id数据进行展开处理

<el-tree
  ref="tree"
  :data="deptOptions"
  node-key="id"
  :default-expanded-keys="isArr"
  :props="treeProps"
  :show-checkbox="ischeckbox"
  :expand-on-click-node="false"
  :default-expand-all="false"
  :check-strictly="false"
  :filter-node-method="filterNode"
  :default-checked-keys="['']"
  @node-click="handleCheckChange"
  highlight-current
/>
//因为我们这里的树形结构是作为子组件的,接收的父组件传递过来的值
//deptOptions这个就是数据
//isArr这个是存放需要默认展开的数据
export default {
  props: {
    "deptOptions": {
      type: Array,
      default: []
    },
    "ischeckbox": {
      default: false
    },
    "isArr":{
      type: Array,
      default: []
    }

  },
  data() {
    return {}
}

isArr数据获取方式:

//html代码块
<template>
  <el-container style="height: 100%; width: 100%">
    <div style=" height: 100%">
      <treeSingleSelection :dept-options="deptOptions" :is-arr="isArr"/>
    </div>
   //data中定义的数据
   data() {
      return {
        deptOptions: [],
        isArr:[],}
    }
//获取isArr的方法
//因为我们想要的效果是默认展开到第三层,所以这里再进行递归时,将前三层的数据push到isArr中即可
getTreeData() {
  queryWellTree().then((res) => {
    const wells = this.recursion(res.data)
    this.deptOptions = res.data;
  })
},
recursion(datas, level = 0) {
  const wells = [];
  for (const data of datas) {
    if ('company' == data.type && level == 0) {
      this.isArr.push(data.id)
      wells.push({
        id: data.id,
        name: data.name,
        children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
      });
    } else if ('org' == data.type && level == 1) {
      this.isArr.push(data.id)
      wells.push({
        id: data.id,
        name: data.name,
        children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
      });
    } else if ('ogf' == data.type && level == 2) {
      this.isArr.push(data.id)
      wells.push({
        id: data.id,
        name: data.name,
        children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
      });
    } else if ('platform' == data.type && level == 3) {
      wells.push({
        id: data.id,
        name: data.name,
        children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
      });
    } else if ('well' == data.type && level == 4) {
      wells.push({
        id: data.id,
        name: data.name,
        children: data.children ? this.recursion(data.children, level + 1) : null, // 递归处理当前层级的子节点
      });
    } else if ('layer' == data.type && level == 5) {
      wells.push({
        id: data.id,
        name: data.name,
        children: null,
      });
    }
  }
  return wells;
},
    
    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值