工作中遇到的问题6（实现一个树结构和一个折叠表格的联动）

需求描述：

要做的就是左边一个可折叠的树结构，右边一个可折叠的表格，默认全部选中，当选中的时候，右边对应显示相关体检项，当取消选中的时候，右侧消失

图1：成果页面

分析：左侧的a-tree和右侧的a-table两个接口请求过来的数据。

图2：左侧树结构的数据

右侧表格结构请求过来的数据

实现步骤分析：

第一步：

首先知道ant-design-vue的对应a-tree组件中有一个方法，onChecked,打印出info里边有选中的每一个节点的信息。第一步要做的就是拿到所有选中的节点的itmeCode把它拼成一个用于比较的数组

//目录树和右边表格的关联
    onchecked(checkedKeys, info) {
      console.log('打印选中是的得到的东西',info)
      let that = this
      that.idArr = []
      let checkNodes = info.checkedNodes
      let typeCodeArr = []

      let res = Object.assign({}, { data: JSON.parse(JSON.stringify(this.moduleDataOriginal)) })
      for (let index = 0; index < checkNodes.length; index++) {
        const item = checkNodes[index].data.props.dataRef

        if (!item.hasOwnProperty('children') || item.children.length > 0) {
          continue
        }
        that.idArr.push(item.typeCode)
        let data = item.typeCode
        that.SearchIdsResult(res.data, item.parentId)

        console.log(that.idArr)
        let findCode = typeCodeArr.find((m) => m === data)
        if (findCode == null) {
          typeCodeArr.push(data)

          let findParentCode = typeCodeArr.find((m) => m === item.parentId)
          if (findParentCode == null) {
          }
        }
      }

      this.SearchFitResult(res.data, that.idArr)
      console.log(res)
      this.regionData1 = res.data
    },

其中打印除的res的结果如下所示：

第二步

需要深拷贝一份右侧表格中的数据，拿右侧表格中的数据中的itemCode和拼接好的比较数组进行比较，如果在表格数据中找到res的itemCode，name保留下来，没找到的就删掉。

SearchIdsResult(originData, typeCode) {
      var that = this
      for (let i = 0; i < originData.length; i++) {
        let hasMatch = false
        if (originData[i].hasOwnProperty('typeCode')) {
          var findTypeCode = typeCode === originData[i].typeCode
          if (findTypeCode) {
            hasMatch = true
            let findCode = that.idArr.find((m) => m === originData[i].typeCode)
            if (findCode == null) {
              that.idArr.push(originData[i].typeCode)
            }
            if (originData[i].parentId && parseInt(originData[i].parentId) > 4) {
              that.SearchIdsResult(originData, originData[i].parentId)
              let findCodeParent = that.idArr.find((m) => m === originData[i].parentId)
              if (findCodeParent == null) {
                that.idArr.push(originData[i].parentId)
              }
            }
            return
          } else {
            // if(!hasMatch&& i==originData.length-1)
            // {
            if (originData[i].hasOwnProperty('children') && originData[i].children.length > 0) {
              that.SearchIdsResult(originData[i].children, typeCode)
            }
            // }
          }
        }
      }
    },

第三步：

SearchFitResult(originData, typeCodeArr) {
      var that = this
      for (let i = 0; i < originData.length; i++) {
        let hasMatch = false
        if (originData[i].hasOwnProperty('typeCode')) {
          var findTypeCode = typeCodeArr.find((s) => s === originData[i].typeCode)
          if (findTypeCode == null) {
            originData.splice(i, 1)
            i--
            hasMatch = true
          } else {
            if (originData[i].hasOwnProperty('children')) {
              that.SearchFitResult(originData[i].children, typeCodeArr)
            }
          }
        }
      }
      return originData
    },

上述步骤节课实现对应功能