关于树状下拉框的通用方法

1.找到树状文件夹下的文件Id对应的字段的内容

方法：

// arr  树状文件   targetId 文件id   fieldName要查找的字段名

export function findFieldInNestedArray(arr, targetId, fieldName) {

  for (var i = 0; i < arr.length; i++) {

    if (arr[i].Id === targetId && arr[i].Data.hasOwnProperty(fieldName)) {

      return arr[i].Data[fieldName]

    } else if (arr[i].Children && arr[i].Children.length > 0) {

      var result = findFieldInNestedArray(arr[i].Children, targetId, fieldName)

      if (result !== null) {

        return result

      }

    }

  }

  return null

}

使用：

import { findFieldInNestedArray } from '@/utils/findFile'

var fileTypeConfigJson = JSON.parse(

        findFieldInNestedArray(this.dataList[0].config.treeBlock.tree.data, this.FileTypeId,'FileTypeConfigJson')

      )

2.如果要修改树状下拉框父子级的关系

限制：不能选择自己的子级作为自己的父级

方法：findFieldDiable

export function findFieldDiable(arr, targetId, fieldName) {

  for (var i = 0; i < arr.length; i++) {

    if (arr[i].Id === targetId) {

      addFieldInNestedArray(arr[i].Children, fieldName, true)

    } else if (arr[i].Children && arr[i].Children.length > 0) {

      var result = findFieldDiable(arr[i].Children, targetId, fieldName)

      if (result !== null) {

        return result

      }

    }

  }

  return null

}

里面使用了另外一个方法addFieldInNestedArray

作用：为树状文件夹下所有文件都增加一个字段

export function addFieldInNestedArray(arr, fieldName, value) {

  console.log(arr, fieldName, value)

  for (var i = 0; i < arr.length; i++) {

    if (arr[i].Children && arr[i].Children.length > 0) {

      arr[i][fieldName] = value

      var result = addFieldInNestedArray(arr[i].Children, fieldName, value)

      if (result !== null) {

        return result

      }

    } else {

      arr[i][fieldName] = value

    }

  }

  return null

}

使用： findFieldDiable

res.Data  树状下拉框的数据

this.FileTypeId   选中的id

IsSystem  添加的做disabled限制的字段

findFieldDiable(res.Data, this.FileTypeId, 'IsSystem')

使用：addFieldInNestedArray

arr  树状下拉框的数据

fieldName  增加的字段名

true    增加的字段的内容

addFieldInNestedArray(arr, fieldName, true)

作用：选中2目录打开编辑弹窗，3作为2的子级不能被选择而被禁用了

备注：el-tree-select的使用

 <el-tree-select

          ref="treeSelect"

          class="treeselect"

          style="width: 98%"

          v-model="form.ParentId"

          :tree-params="treeParams"

        />

 treeParams: {

        data: [],

        filterable: false,

        clickParent: true,

        props: {

          children: 'Children',

          label: 'Label',

          value: 'Id',

          disabled: 'IsSystem'

        }

      },

   this.$nextTick((_) => {

          this.$refs.treeSelect.treeDataUpdateFun(res.Data)

        })

3.在多选情况下，下拉框全选一般是获取到的父级和子级的id，但现在需要只获取子级的id

注：这个方法的使用主要与另外一篇文章相关

// 监听下拉框数据如果数据有子级,就不显示,没子级就显示

arr  获取到的id的数组   DraList  树状文件的数组

export function handleRemoveTag(arr, DraList) {

  var ids = []

  arr.forEach((item) => {

    if (findParentNode(item, DraList)) {

      ids.push(findParentNode(item, DraList))

    }

  })

  return ids

}

export function findParentNode(targetId, arr) {

  for (var i = 0; i < arr.length; i++) {

    if (arr[i].Id === targetId) {

      if (arr[i].Children.length === 0) {

        return arr[i].Id

      }

    } else if (arr[i].Children && arr[i].Children.length > 0) {

      var result = findParentNode(targetId, arr[i].Children)

      if (result !== null) {

        return result

      }

    }

  }

  return null

}

使用：

handleRemoveTag(nodeIds, this.DraList)