传值

首先要做的就是将树渲染出来，并且能够取到对应的值
utils-recursion.js

const recursion = {
  // 转换树结构并将需要的值存进树中
  // 存值为：除了树结构必须的值外，我需要发送给后台的值 (code)
  convertTree: function (tree, map) {
    const result = [];
    tree.forEach((item) => {
      // 读取 map 的键值映射
      let expand = true;
      let checked = false;
      let title = item[ map.title ];
      let code = item[ map.code ];
      let children = item[ map.children ];
      // 如果有子节点，递归
      if (children) {
        children = this.convertTree(children, map);
      }
      result.push({ expand, checked, code, title, children });
    })
    return result;
  },
}

export default recursion

转换过程

import recursion from '@/utils/recursion'

// 后台返回的字段
const map = {
  title: 'name',
  children: 'finClassList',
  code: 'code'
}
this.typeTree = recursion.convertTree(res.data, map)

获取选中的树的值

<Tree :data="typeTree" @on-check-change="getTypeTree" show-checkbox></Tree>

getTypeTree (arr) {
  this.typeTreeResult = []
  arr.forEach((item) => {
    // 如果全选，会将子级和父级全部返回，若只需子级，则将父级去除
    if (item.title !== '父级名称' ) {
      this.typeTreeResult.push(item.code)
    }
  })          
}

全选

utils-recursion.js

const recursion = {
  // 转换树结构并将需要的值存进树中
  convertTree: function (tree, map) {
    // ...
  },
  // 设置全选与反选树，第一个参数值为树，第二个参数值为true为全选，false为反选
  convertTreeCheck: function (tree, checkVal) {
    const result = [];
    tree.forEach((item) => {
      // 读取 map 的键值映射
      let expand = true;
      let checked = checkVal;
      let title = item.title;
      let code = item.code;
      let children = item.children;
      // 如果有子节点，递归
      if (children) {
        children = this.convertTreeCheck(children, checkVal);
      }
      result.push({ expand, code, checked, title, children });
    })
    return result;
  },
}

export default recursion

全选

this.typeTree = recursion.convertTreeCheck(this.typeTree, true)

反选

this.typeTree = recursion.convertTreeCheck(this.typeTree, false)

回显

因为设计方式，选中的树会在树的上方逐个列出来，所以这里对回显的处理是不在树中不显示已选的节点，即在向后台请求数据前，将已选的数据发送给后台，将这些数据过滤掉。

如果要回显的话，其实和上面的代码没什么区别，将返回的数据设置是否选中即可。

utils-recursion.js

const recursion = {
  // 转换树结构并将需要的值存进树中
  convertTree: function (tree, map) {
    // ...
  },
  // 设置全选与反选树，第一个参数值为树，第二个参数值为true为全选，false为反选
  convertTreeCheck: function (tree, checkVal) {
    // ...
  },
  // 回显树
  convertTreeShow: function (tree, map) {
    const result = [];
    tree.forEach((item) => {
      // 读取 map 的键值映射
      let expand = true;
      let checked = item[ map.checked ];
      let title = item[ map.title ];
      let code = item[ map.code ];
      let children = item[ map.children ];
      // 如果有子节点，递归
      if (children) {
        children = this.convertTreeShow(children, map);
      }
      result.push({ expand, code, checked, title, children });
    })
    return result;
  }
}

export default recursion

回显树

const map = {
  title: 'name',
  children: 'finClassList',
  checked: 'flag',
  code: 'code'
}
this.typeTree = recursion.convertTreeShow(tempTree, map)

判断某个值是否在两层的树中

tree1.png

tree2.png

网站导航

网站导航