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);      }    }  }}

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

点击全文阅读