前端-VUE 保存和加载表单

问题：由于服务器不稳定，导致用户提交表单容易丢失，因为增加“保存“按钮，以及每次加载页面先读取是否有保存数据，再渲染到页面上。

遇到的难点1：保存，提交给的数据，是一个对象

坑：表单中存在非常多的下拉选择器，这些下拉选择器中是树结构，

之前人的做法是，用户选中树的某个人员，

然后先给选择器赋值了人名，接着用临时变量aaa保存了ID，

然后在提交之前用ID替换了人名

现在保存的时候，也是要用上面的做法。

但是这就引出了加载时候的问题

遇到的难点2：加载的时候我们拿到的是用户id，直接赋值给选择器的话，就会导致显示的是一堆数字，这是不正确的。

解法：因此，我们需要在保存的时候，把用户的姓名和ID一起传给接口，接着在读取的时候读取到这些name,同时再用一个临时变量bbb来保存ID，先让选择器显示name

接下来就引出了难点3：万一加载之后，用户改变数据了，怎么办？

由上可知，用户选择新的值之后，aaa会拿到新的临时变量id，接下来我们在提交的时候就要判断，aaa是否为空？

不为空的话，说明用户选了新的值，用aaa替代要提交的值。

Aaa为空的话，说明没选新的值，用我们之前Bbb来赋值，提交

2个坑点：

aaa可能不是空，而是undefined。

我们拿到的是加载数据是一个json字符串，因此我们需要用JSON.parse将其转换成对象。

第三个可能存在的需求

也就是选择器这部分，做的好的话，是需要让这些树在加载之后默认选中数据的。

先要配置树结构

ref="tree1"

node-key="userId"

代表节点的哪个值代表树节点的值

然后需要先用setCurrentKey设置高亮，接着setCheckedKeys设置选中

//选中保存的值

        this.$nextTick(()=>{

          this.$refs.tree1.setCurrentKey(this.pPerson);//选择框实际选中 根据id

          this.$refs.tree1.setCheckedKeys(this.pPerson);//选择框实际选中 根据id

          this.$refs.tree2.setCurrentKey(this.tPerson);//选择框实际选中 根据id

          this.$refs.tree2.setCheckedKeys(this.tPerson);//选择框实际选中 根据id

          this.$refs.tree3.setCurrentKey(this.sPerson);//选择框实际选中 根据id

          this.$refs.tree3.setCheckedKeys(this.sPerson);//选择框实际选中 根据id

        })