1.递归函数构造el-tree所需要的n层不确定层数的数据结构

3 层的：

getTree(data) {
  let result = data.map(e => {
    if (e.children) {
      let tempList = e.childList.map(e2 => {
        return {
          id: e2.navId,
          label: e2.navName,
          children: e2.children
        };
      });
      return {
        id: e.navId,
        label: e.navName,
        children: tempList
      };
    } else {
      return {
        id: e.navId,
        label: e.navName,
        children: e.children
      };
    }
  });
  return result;
},

递归 n 层的：

getTree(data) {
  //递归函数
  let result = data.map(e => {
    if (e.children) {
      let tempList = this.getTree(e.children);
      return {
        id: e.navId,
        label: e.navName,
        children: tempList
      };
    } else {
      return {
        id: e.navId,
        label: e.navName,
        children: e.children
      };
    }
  });
  return result;
},
  makeThedataSale(data) {
    let result = this.getTree(data);
    this.dataSale = result;
    console.log(this.dataSale);
  },

注意：只是构建出 id，label，children 的属性结构

el-tree 可以用label和 children属性去指定节点标签为节点对象的某个属性值，并不一定非要去 map 遍历！

2.console.log()具有不真实性

console.log()打印的内容可能是后面经过处理的，而不一定是当前真实的

所以不要完全相信console的值，要把其后面的逻辑注释掉，再看console的值才是真实的

而问题往往就出现在后面的代码中（后面的代码给console打印的内容赋值了）

实例：后端接口保存失败，导致打印的内容有问题！

console.log(this.ruleForm2); //后面的getAgentInvoiceInfoFn方法查询会导致这里输出的结果不准确
params = {
  agentName: this.ruleForm2.agentName,
  idCard: this.ruleForm2.idCard,
  invoiceType: this.invoiceType,
  idCardBack: imgs2 || "",
  idCardFront: imgs1 || "",
  campusId: this.campusId || "",
  invoiceAssort: this.ruleForm2.elecInvoiceType2 || null,
  email: this.ruleForm2.eMail2 || "",
  mobile: this.ruleForm2.mobile2 || ""
};
}
console.log("=======");
console.log(params);
console.log("=======");
saveAgentInvoice(params).then(ret => {
  if (ret.code === 0) {
    this.getAgentInvoiceInfoFn(); //这个方法给ruleForm2赋值了，导致页面表单中的两个字段不显示 ——> 根本原因是后端接口在保存这两个字段的时候有问题，根本没有保存上！
    this.$message({
      message: ret.message || "保存成功",
      type: "success"
    });
  } else {
    this.$message({
      message: ret.message || "保存失败",
      type: "warning"
    });
  }
});

3.react中封装modal组件

4.el-tree使用 props 配置项

<el-tree
  ref="treeForm"
  :data="treeData"
  highlight-current
  node-key="id"
  show-checkbox
  check-strictly
  :filter-node-method="filterNode"
  :default-expanded-keys="[tree_default_check]"
  :accordion="true"
  :expand-on-click-node="false"
  :check-on-click-node="false"
  :props="treeProp"
  @check-change="handleClick"
>
  <span slot-scope="{ node, data }">
    <i :class="icons[data.type]" />
    <span style="margin-left:5px;" :title="data.name">{{ data.name }}</span>
	</span>
</el-tree>

data中定义：

treeProp: {
  disabled: function(data, node) {
    if (data.type === 'class') {
      return !data.leaf
    }
  }
}

有的可以传递 function，要善于使用！