Vue.js 组织机构树形选择器 - 筛选当前组织机构名称及子级 - 常规

Vue.js 组织机构树形选择器 - 筛选当前组织机构名称及子级

在 Vue.js 中，可以使用 Element UI 的 el-tree-select 组件来实现组织机构树形选择器。为了防止选择器显示当前组织机构名称及其子级，需要在筛选逻辑中进行一些优化。

以下代码展示了如何实现这一功能：

filterNode(value, data) {
  if (!value) return true // 如果没有筛选值，则显示该节点
  if (data.label.includes(value)) { // 判断当前数据是否包含筛选值
    // 判断当前数据是否为当前组织机构名称
    if (data.deptName === this.formData.deptName) {
      return false; // 如果是，则不显示该节点
    }
    // 判断当前数据是否为当前数据的子级
    if (this.checkIsChild(data, this.formData)) {
      return false; // 如果是，则不显示该节点
    }
    return true; // 如果以上条件都不满足，则显示该节点
  }
  return false; // 如果当前数据不包含筛选值，则不显示该节点
},
checkIsChild(child, parent) {
  if (!child || !parent) return false; // 如果 child 或 parent 为空，则返回 false
  if (child.parentId === parent.deptId) return true; // 如果 child 的 parentId 等于 parent 的 deptId，则表示 child 是 parent 的子级，返回 true
  if (!child.parentId || child.parentId === '0') return false; // 如果 child 没有 parentId 或 parentId 为 '0'，则表示 child 没有父级，返回 false
  const parentNode = this.filteredDeptList.find(item => item.deptId === child.parentId); // 查找 child 的父节点
  return this.checkIsChild(parentNode, parent); // 递归查找父节点，直到找到父节点为止
}

代码解释：

filterNode 方法用于筛选树节点。
- 如果没有筛选值，则直接显示该节点。
- 如果当前数据包含筛选值，则进一步判断当前数据是否为当前组织机构名称或其子级。如果是，则不显示该节点；否则显示该节点。
checkIsChild 方法用于递归判断当前数据是否为当前数据的子级。
- 如果当前数据的 parentId 等于当前数据的 deptId，则表示当前数据是当前数据的子级，返回 true。
- 如果当前数据的 parentId 为空或为 '0'，则表示当前数据没有父级，返回 false。
- 否则，递归查找当前数据的父节点，直到找到父节点为止。

通过以上代码，我们可以有效地防止组织机构树形选择器显示当前组织机构名称及其子级，提高用户体验。