iview 手风琴模式

最新推荐文章于 2024-04-26 16:47:03 发布

H5女王

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量204

点赞数

文章标签： view design javascript 开发语言

原文链接：https://wonderlust91.github.io/2019/02/06/iview%E6%89%8B%E9%A3%8E%E7%90%B4%E6%A0%91%E7%AE%97%E6%B3%95/

版权

原文网址
https://wonderlust91.github.io/2019/02/06/iview%E6%89%8B%E9%A3%8E%E7%90%B4%E6%A0%91%E7%AE%97%E6%B3%95/

/*
 * iview手风琴树（每次只展开一个树节点）
 * 传入当前节点与树数据（类型Array）
 */
export const accordionTree = (currentNode, treeData) => {
  /*
   * 传入树数据和当前节点
   * 返回当前节点的父节点
   */
  function findParent(treeData, currentNode) {
    // 声明最终父节点
    let finalParentNode = null;
    /*
     * 传入树数据，当前点击节点、与此时遍历节点的父节点
     * 将最终父节点赋值为当前点击节点的父节点
     */
    function findParentInner(treeData, currentNode, parentNode) {
      // 内部查找函数，若当前节点nodeKey与遍历节点nodeKey相同时，则此时的parentNode为要找的最终父节点，否则判断遍历节点是否存在子节点，若存在则递归执行函数，若不存在则什么都不做
      treeData.forEach(item =>
        item.nodeKey === currentNode.nodeKey
          ? (() => {
              finalParentNode = parentNode;
            })()
          : (() => {
              item.children
                ? findParentInner(item.children, currentNode, item)
                : "";
            })()
      );
    }
    // 执行内部函数
    findParentInner(treeData, currentNode, finalParentNode);
    return finalParentNode;
  }
  /*
   * 传入树数据，当前点击节点
   * 折叠树
   */
  function collapseTree(treeData, currentNode) {
    treeData.forEach(item => {
      // 若遍历节点为折叠则什么都不做，若为展开则判断遍历节点与当前节点nodeKey是否相同，若相同则什么都不做，否则设为折叠
      item.expand
        ? (() => {
            item.nodeKey === currentNode.nodeKey ? "" : (item.expand = false);
          })()
        : (() => {})();
      // 若遍历节点存在子节点则递归此函数，否则什么都不做
      item.children ? collapseTree(item.children, currentNode) : "";
    });
  }
  // 找到当前点击节点的父节点
  let parentNode = findParent(treeData, currentNode);
  // 折叠树，若父节点为null，则为根节点，传入所有树数据（根节点）；若不为null，则传入父节点的子节点
  parentNode === null
    ? collapseTree(treeData, currentNode)
    : collapseTree(parentNode.children, currentNode);
};