element tree 初始化表单验证初始化

问题：

使用this.$ref['form'] .resetFields()无法重置表单项

原因：

1.没有给表单添加ref属性（且名字不能和 :model="addForm" 名字重复否则不起作用）
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位数字、字母或下划线"));
        } 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: "华东区域",
              children: [
                {
                  id: 9,
                  label: "上海"
                },
                {
                  id: 10,
                  label: "昆山"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "品牌二",
          children: [
            {
              id: 5,
              label: "华东区域"
            },
            {
              id: 6,
              label: "华南区域"
            }
          ]
        },
        {
          id: 3,
          label: "品牌三",
          children: [
            {
              id: 7,
              label: "华北区域"
            },
            {
              id: 8,
              label: "华南区域"
            }
          ]
        }
      ],
        props: {
          label: "departmentName",
          children: "children"
        },
   
        // 编辑相关数据
        addFormResource: {
          account: [{required: true, validator: checkUname, trigger: "blur"}],
   
          name: [{required: true, validator: validatePass, trigger: 'blur'}]
          
        },
        // 添加绑定的数据
        addForm: {
          // account: "",
          departmentId: "",
          departmentPid: "",
          name: "",
          flag: "1",
          phone: "",
          userRoleIds: "",
          roles: "",
          policeNumber: '',
          loginAlias: ''
        },
        //按钮权限
        btnShow: {
          insertUserAndRoleInfo: 0,
          selectById: 0,
          updateUserInfo: 0, //修改
          updateUserUsingUserByIds: 0, //启用用户
          updateUserForbidByIds: 0 //禁用用户
        },
        
        treeId: "",
        depList: [],
        isAddTree: false
      };
    },

4.调用方法

this. $refs.addForm1.resetFields() //注意 addForm1 （且名字不能和 :model="addForm" 名字重复否则不起作用） this.$ refs.depTree.setCheckedKeys([]); // 注意点击事件影响

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

可能会对 tree 值产生影响使，重置无效

// 取消
      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([]);

      
      },

最后编辑于：2020.05.19 15:06:52

element tree 初始化 表单验证初始化

问题：

原因：

element tree 初始化表单验证初始化