关于VUE前端页面tree组件 ---多选框（回显、后台交互、数据显示）

关于el-tree 组件 复选框的值显示问题以及回显----后台交互

首先附上效果图：

<el-tree
        :data="dataForm.roleData"
        node-key=""   -- 父节点字段名
        :load=""    -- 子节点字段名
        show-checkbox
        default-expand-all  -- 默认展开所有节点
        @check-change="handleCheckChange"  -- 单选以及全选
        ref="tree"   
        :props="defaultProps">    -- 用来定义children 以及lobel的名称（父节点名Name）
</el-tree>

```javascript
 -- js代码块
//单选
handleCheckChange() {
  this.prdIdList = this.$refs.tree.getCheckedKeys() ;
},

//设置全选或反选
handleCheckAll() {
  let idList = [] ;
  for (var i=0;i<this.dataForm.roleData.length;i++) {
    idList.push(this.dataForm.roleData[i].Id) ;

  }
  defaultProps: {
  children: 'children',
  label: 'Name'  -- 子节点的字段名  （这个千万得写正确，不然页面就只有复选卡没有数值）
},

roleDate  字段名是 后管查询出来需要展现的树形结构（List>）
上面的vue代码块，就是前端做需要的

List<Map<String,Object>> list =（sql查询语句）
JSONArray array = TreeUtil.listToTree(JSONArray.parseArray(JSON.toJSONString(list)),"Id","PId","children");
return array；

 //其中的Id Pid 指向的就是你的父节点，子节点


//下面是工具类 
package com.csii.mgmt.utils;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

public class TreeUtil {

    /**
     * - listToTree -
     * 

     * 方法说明
     * 

     * - 将JSONArray数组转为树状结构
     * - @param arr 需要转化的数据
     * - @param id 数据唯一的标识键值
     * - @param pid 父id唯一标识键值
     * - @param child 子节点键值
     * - @return JSONArray
     */
    public static JSONArray listToTree(JSONArray arr, String id, String pid, String child) {
        JSONArray r = new JSONArray();
        JSONObject hash = new JSONObject();
        // 将数组转为Object的形式，key为数组中的id
        for (int i = 0; i < arr.size(); i++) {
            JSONObject json = (JSONObject) arr.get(i);
            hash.put(json.getString(id), json);
        }
        // 遍历结果集
        for (int j = 0; j < arr.size(); j++) {
            // 单条记录
            JSONObject aVal = (JSONObject) arr.get(j);
            // 在hash中取出key为单条记录中pid的值
            JSONObject hashVP = (JSONObject) hash.get(aVal.get(pid).toString());
            // 如果记录的pid存在，则说明它有父节点，将她添加到孩子节点的集合中
            if (hashVP != null) {
                // 检查是否有child属性
                if (hashVP.get(child) != null) {
                    JSONArray ch = (JSONArray) hashVP.get(child);
                    ch.add(aVal);
                    hashVP.put(child, ch);
                } else {
                    JSONArray ch = new JSONArray();
                    ch.add(aVal);
                    hashVP.put(child, ch);
                }
            } else {
                r.add(aVal);
            }
        }
        return r;
    }

}

这是sql需要查询得格式
select id,pid,name,pid||'|'||id as nodeKey from ( (select distinct(a.prdgrpid) as id ,'0' as pid,b.prdgrpname as name from bankpgp a left join productgroup b on a.prdgrpid=b.prdgrpid where a.prdgrpstate='0' ) union (select distinct(a.prdid) as id,a.prdgrpid as pid , b.prdname as name from bankpgp a left join product b on a.prdid=b.prdid where a.prdgrpstate='0' ) ) xxx

**

2.1： 然后是一个复选框得回显：**

<el-tree
        :data="dataForm.roleData"
        node-key=""   --父节点ID
        show-checkbox
        default-expanded-keys="prdIdList"  -- 后管传过来回显的数据值
        :default-checked-keys="prdIdList" -- 后管传过来回显的数据值
        ref="tree"
        :props="defaultProps">
</el-tree>

created() {
    this.setDataInfo();
},   -- 页面刚进来就先加载这个方法函数

setDataInfo() {
    this.dataForm.roleId = this.$route.params.RoleId;
    this.dataForm.roleName = this.$route.params.RoleName;
    this.dataForm.roleState = this.$route.params.RoleState;
    this.prdIdList = this.$route.params.PrdId;
},
-- 这是接收后管的参数值，如果开发中遇到空，可以尝试这alert 或者concat 

defaultProps: {
    children: 'children',
    label: 'Name',
    disabled: this.disabledFn,
}

disabledFn(data, node) {
    if (!data.isAggregation) {
        return true;
    } else {
        return false;
    }
}   -- 针对详情功能开发

这大概就是针对tree开发复选卡+回显+后管接收参数、传参

---

需要注意得一点就是 ：用我上传得转化树状得模板 数据库中对应得父节点PID必须为0

---

在开发过程中，一直是在网上寻求答案解决参考官方文档。所辛的是还是功夫不负有心人。然后把自己的前后代码模块附上，让你我他更少一点歪路。增加开发效率