一个简单的递归，控制显示element中tree组件的删除按钮

简介

一开始做设备树管理中的删除功能：位置可删除，未完善的设备可删除，完善的设备不能删除，只要有子节点就不能删除。这样代码简单只须判断设备是否完善，是否有子节点，一行代码就能搞定。缺点就是因为不能删除存在有子节点的节点，这就导致每次只能删除一个节点。

测试觉得这样操作不方便，希望一下能删掉全部未完善的设备和位置。这个功能需求就变成：只要子节点存在完善的设备，父节点就不能删除。子节点都是未完善设备，删除父节点，父节点及其子节点都被删除。这下就得去遍历所有子节点了，就不是俩个判断就能搞定的了。

于是就花点时间写了个递归去实现

页面

		<el-tree ref="deptTree" class="tree" :data="deptTree" :props="defaultProps" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode">
          <span class="tree-node" slot-scope="{ node, data }" @click.stop="output(node,data)">
            <span>
              <i :class="data.type !== 2 ? 'el-icon-place' : data.ifSpecialDevice == 1 ? 'el-icon-s-tools' : 'el-icon-setting'"></i>
              {{node.label}}{{ data.type == 2 ? `【${data.deviceNo}】` : ''}}
              <i v-if="data.type == 2 && data.status == 0" class="el-icon-warning ml5" style="color: #F2C073"></i>
            </span>
            <span v-if="canEdit">
              <el-button size="mini" type="text" icon="el-icon-plus" @click.stop="editTree(node,data, 1)">添加</el-button>
              <el-button v-if="data.parentId!==0" size="mini" type="text" icon="el-icon-edit" @click.stop="editTree(node,data, 2)">编辑</el-button>
              <el-button v-if="data.parentId!==0 && hasChild(node, data)" size="mini" type="text" icon="el-icon-delete" @click="remove(node, data)">删除</el-button>
            </span>
          </span>
        </el-tree>

树形数据

deptTree:{
  id:67,
  name:"一楼",
  parentId:66,
  type:1,
  status:0,
  children: [{
	id:68,
    name:"设备2",
    parentId:67,
    type:2,
    status:0,
  },{
	id:69,
    name:"设备2",
    parentId:67,
    type:2,
    status:0,
  }]
}

递归函数

思路还是比较简单，判断当前节点是否可删除，再去遍历子节点

	hasChild(node) {
      let data = node.data
      let childList = node.childNodes
      let flag = true
      // 地址 可删除
      if (data.type == 1) {
        flag = true
      } else {
        // 未完善可删除
        flag = data.status == 0 ? true : false
      }
      // 不能删return出去
      if (flag == false) return flag

      // 有孩子的
      if (childList?.length > 0) {
        for (let index = 0, length = childList.length; index < length; index++) {
          let cNode = childList[index]
          flag = this.hasChild(cNode)
          if (flag == false) return flag
        }
      }
      return flag
    },

效果图