問題：

使用this.$ref['form'] .resetFields()無法重置表單項

原因：

1.沒有給表單添加ref屬性 （且名字不能和 :model="addForm" 名字重復(fù) 否則不起作用 ）
2.表單項el-form-item沒有添加prop屬性，prop屬性需要與input框綁定的屬性一致

<el-form :model="addForm" label-width="100px" :rules="addFormResource" ref="addForm1">
         <el-row :gutter="10">
           <el-col :span="12">
             <!-- <el-row>
               <el-col :span="24">
                 <div class="grid-content bg-purple">
                   <el-form-item label="用戶名" prop="account">
                     <div class="input-tpm blue-input">
                       <i class="honer-left"></i>
                       <el-input placeholder v-model="addForm.account"></el-input>
                       <i class="honer-right"></i>
                     </div>
                   </el-form-item>
                 </div>
               </el-col>
             </el-row> -->
             <el-row>
               <el-col :span="24">
                 <div class="grid-content bg-purple-light">
                   <el-form-item label="姓名" prop="name">
                     <div class="input-tpm blue-input">
                       <i class="honer-left"></i>
                       <el-input placeholder v-model="addForm.name"></el-input>
                       <i class="honer-right"></i>
                     </div>
                   </el-form-item>
                 </div>
               </el-col>
             </el-row>
           </el-col>
           <el-col :span="12">
             <div style="font-size: 14px;">部門選擇</div>
             <div style="height: 250px;overflow: auto">
               <el-tree
                 size="small"
                 show-checkbox
                 :data="treeData"
                 node-key="id"
                 :check-strictly="true"
                 :props="props"
                 @check-change="checkChange"

                 ref="depTree"
               ></el-tree>
             </div>
           </el-col>
         </el-row>
       </el-form>

3.data 類型

data() {
      var checkUname = (rule, value, callback) => {
        var regx = /^[a-zA-Z0-9_]{4,16}$/;
        if (value == "") {
          callback(new Error("請輸入用戶名"));
        } else if (!regx.test(value)) {
          callback(new Error("用戶名必須是4~6位數(shù)字、字母或下劃線"));
        } else {
          callback();
        }
      };
   
      // 真實姓名校驗
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請輸入姓名'));
        } else {
          if (this.LoginorgCode == '') {
            callback(new Error('請先選擇部門再填寫姓名'));
          } else {
            /*api.getBeyLoginName({
              realName: value,
              orgCode: this.LoginorgCode
            }).then(res => {
              console.log("res", res)
              if (res.code == 'code_200') {
                this.nameSeq = res.data.nameSeq;
                callback(new Error("該用戶名已存在請用" + res.data.loginAlias + "登錄"));
              } else {
                callback();
              }
            });
          */

          }
        }
      };
 
      return {
     
        treeData:[
        {
          id: 1,
          label: "品牌一",
          children: [
            {
              id: 4,
              label: "華東區(qū)域",
              children: [
                {
                  id: 9,
                  label: "上海"
                },
                {
                  id: 10,
                  label: "昆山"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "品牌二",
          children: [
            {
              id: 5,
              label: "華東區(qū)域"
            },
            {
              id: 6,
              label: "華南區(qū)域"
            }
          ]
        },
        {
          id: 3,
          label: "品牌三",
          children: [
            {
              id: 7,
              label: "華北區(qū)域"
            },
            {
              id: 8,
              label: "華南區(qū)域"
            }
          ]
        }
      ],
        props: {
          label: "departmentName",
          children: "children"
        },
   
        // 編輯相關(guān)數(shù)據(jù)
        addFormResource: {
          account: [{required: true, validator: checkUname, trigger: "blur"}],
   
          name: [{required: true, validator: validatePass, trigger: 'blur'}]
          
        },
        // 添加綁定的數(shù)據(jù)
        addForm: {
          // account: "",
          departmentId: "",
          departmentPid: "",
          name: "",
          flag: "1",
          phone: "",
          userRoleIds: "",
          roles: "",
          policeNumber: '',
          loginAlias: ''
        },
        //按鈕權(quán)限
        btnShow: {
          insertUserAndRoleInfo: 0,
          selectById: 0,
          updateUserInfo: 0, //修改
          updateUserUsingUserByIds: 0, //啟用用戶
          updateUserForbidByIds: 0 //禁用用戶
        },
        
        treeId: "",
        depList: [],
        isAddTree: false
      };
    },

4.調(diào)用方法

this.refs.depTree.setCheckedKeys([]); // 注意點擊事件影響

@node-click="nodeClick"
@check-change="checkChange"

可能會對 tree 值產(chǎn)生影響 使，重置無效

// 取消
      cancleDialog(type) {
        var self = this;
        //self.$refs["addForm"].resetFields(); //清空\
        console.log(self.$refs,"this.$refs");
        this.$nextTick(()=>{
          this.$refs.addForm1.resetFields() //注意 addForm1 
        });

        //self.$refs.depTree.$children[0].setCheckedKeys([]);
        self.isAddTree = true;
        if(self.isAddTree){
          self.$refs.depTree.setCheckedKeys([]); // 注意點擊事件影響
          self.isAddTree = false
        }
        console.log(self.$refs.depTree.$children[0],"sdfsfsdfsdfsdfsdf")
        //self.$refs.depTreebj.setCheckedKeys([]);
        //self.$refs.depTreeck.setCheckedKeys([]);

      
      },