Vue 进阶（幺伍柒）：Form 表单重置失败问题解决

关注

发布于: 刚刚

一、前言

在Vue项目开发过程中，应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单注意事项。

Form必须要有ref属性；
Form必须绑定:model；

<Form ref="submitUser" :model="submitUser">

复制代码

Form的FormItem中必须要有prop属性;

<FormItem prop="realName"></FormItem>

复制代码

Form包裹的元素绑定值需与FormItem中prop属性名称保持一致（可类比Form表单校验规则）

<Form ref="submitUser" :model="submitUser">  <FormItem prop="uname">    <Input type="text" v-model="submitUser.uname" placeholder="用户名"></Input>  </FormItem>  <FormItem prop="passwd">    <Input type="text" v-model="submitUser.passwd" placeholder="密码"></Input>  </FormItem>  <FormItem>    <Button type="info" @click="query">Login</Button>    <Button @click="handleReset('submitUser')" style="margin-left: 8px;" type="info">Reset</Button>  </FormItem></Form><script>    export default {      data () {            return {        submitUser:{          realName:'',          identityNumber:'',          mobileNumber:'',          telePhoneNumber:''        }      }        },        methods:{      handleReset (name) {        this.$refs[name].resetFields();      }    }    }</script>

复制代码

二、拓展阅读

三、延伸阅读

Vue+iView项目开发过程中，需要实现页面根据html格式的字符串，在页面中解析的效果。例如 let htmlStr='<div style="font-size=16px">我是小标题</div>'页面中显示效果如下：<div style="font-size=16px">我是小标题</div>

主要是在render()函数中实现,示例代码如下：

{  title: "标题",  key: "title",  align: "center",  className:'cleanTitle',  render:(h,params)=>{    return h("div",{domProps:{       innerHTML:`<a href=`+params.row.url+` target='_blank'>`+params.row.title+`</a>`//渲染html内容    }})    // return <a href={`${params.row.url}`} target='_blank'>{params.row.title}</a>  直接渲染标签 }

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/698b053fe6c62af4834979970】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（幺伍柒）：Form 表单重置失败问题解决

一、前言

二、拓展阅读

三、延伸阅读

No Silver Bullet

评论