if判断（新增和编辑）使用模块。

原创于 2021-02-05 13:39:55 发布 · 521 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #增加和编辑

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

es6

1 篇文章

订阅专栏

本文介绍了如何在前端页面中将新增和编辑操作整合到同一个页面处理，通过判断回显数据是否存在来区分是新增还是编辑。在编辑时，使用已有的用户信息填充表单；在新增时，使用预设的初始数据。同时，利用Ant Design Vue的树形组件设置默认选中项，并在保存时将`formObj`作为传递给后台的数据对象。

通常来说，我们会将新增和编辑放到同一页面去处理。那么就需要我们来根据情况来进行判断，什么时候是新增，什么时候是编辑。
接下来将举例。

 intData() {
    //this.changeData 是指回显编辑时当前用户的回显信息。
      if (Object.keys(this.changeData).length) {//如果数据的键值key存在-编辑
        this.type = "edit";
   //this.intObj data数据中初始化的
        let curObj = { ...this.intObj};
        if (this.changeData.orgId) {
        this.userId = this.changeData.id
        curObj.card = this.changeData.card
        curObj.phone = this.changeData.phone;
   //Object.assign对象的合并，第一个参数是目标对象，后面的参数都是源对象
        this.formObj = Object.assign({}, curObj);
   //ant design vue 树形 的默认选择数据。
        var ids = []
        ids.push(this.changeData.orgName)
        this.defaultExpandedKeys = ids
        
      } else {
        this.formObj = { ...this.intObj };
        this.type = "add";
        this.formObj = Object.assign({}, this.intObj);
      }
      **最后this.formObj 就是保存时，要传给后台的数据对象**。
    },