Vue Form 表单重置失败问题解决 及 iView实现table渲染html标签内容

一、前言

在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进阶（幺贰幺）：表单校验注意事项》
• 《Vue进阶（幺叁柒）：表单校验》
• 《Vue进阶（三十）：vue中使用element-ui进行表单验证》
• 《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》

Vue+iView项目开发过程中，需要实现页面根据html格式的字符串，在页面中解析的效果。
例如 let htmlStr='<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>  直接渲染标签
 }