问题:
使用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.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([]);
},
网友评论