Ant Design Vue TreeSelect 树选择 前端如何实现模糊搜索以及获取到当前节点信息和父节点的信息；

前言:写项目的时候,后台返回了个树形结构的数据,要求前端保存的时候,传给后台选取的子节点和父节点的信息;

1.因为后台返回的数据比较多,渲染之后用户不太容易选择,因此就用了Ant Design的模糊搜索的方法;

2.Ant Design 的树选择,只提供了获取选取当前节点的信息,如何获取当前节点的父节点的信息

3.如何渲染后台返回的树结构的数据

记录一下代码;

html部分

   <a-tree-select
            v-model:value="data.formState.deviceBreed"
            show-search
            class="width"
            placeholder="请选择设备品种"
            allow-clear
            tree-default-expand-all
            :tree-data="data.treeData"
            :filterTreeNode="filterTreeNode"
            @change="TreeChange"
          />

渲染后端数据;

   //res是后台返回的数据;
data.treeData = res.map((t) => {
        return {
          pId: Number(t.typeLevel) - 1,
          value: t.typeCode,
          title: t.typeName,
          isLeaf: t.childs.length == 0 ? true : false,
          children: dg(t.childs),
        };
      });

//递归方法;
function dg(data) {
  return data.map((item) => {
    if (item.childs.lenght == 0) {
      return;
    } else {
      return {
        pId: Number(item.typeLevel) - 1,
        value: item.typeCode,
        title: item.typeName,
        isLeaf: item.childs.length == 0 ? true : false,
        children: dg(item.childs),
      };
    }
  });
}

实现模糊查询

// 前端实现模糊搜索；
const filterTreeNode = (input, node) => {
  console.log(input);
  console.log(node.title);
  if (typeof node.title === "string") {
    if (node.title.indexOf(input) !== -1) {
      return true;
    } else {
      return false;
    }
  } else {
    if (node.name.indexOf(input) !== -1) {
      return true;
    } else {
      return false;
    }
  }
};

获取当前节点和父节点;

//选取树节点
const TreeChange = (value, label, extra) => {
  console.log(value, label, extra, "value, label, extra");
  let bbblist = aa(data.treeData, value);
  data.formState.deviceName = bbblist.title;
  data.formState.deviceType = bbblist.value;   
  console.log(bbblist,"父节点数据");
};
function aa(arr, id) {
  let res = null; //父节点
  ergodic(arr, null);
  return res;
  function ergodic(list, pItem) {
    for (let i = 0; i < list.length; i++) {
      let item = list[i];
      if (res) {
        break;
      }
      if (item.value == id) {
        res = pItem;
        break;
      }
      if (item.children) {
        ergodic(item.children, item);
      }
    }
  }
}

结尾:比较难的部分就是最后一个如何获取父节点的信息;