后台管理系统里面有非常多的表单需求，我们希望能够通过写一个json格式的数据，通过
vue
的循环动态地去渲染动态表单。并且能够在外部得到渲染出来的表单的数据，可以对表单进行
重置
操作。我结合element ui的控件的下拉框,输入框，时间选择控件和
vue
-treeselect，做了一个动态表单。
v-model的理解
先简单讲一下
vue
-model是怎么玩的。其实
vue
-model相当于给表单元素传递一个value,外部监听input事件。所以我们自己封装表单组件的时候也是可以传递一个value值，监听input事件获取输入的值。
<input type="text" v-model="
不合理，需要实现
重置
某筛选条件的功能。
组件内部的
重置
按钮
click方法
<el-button size="mini" @click="resetData">
重置
</el-button>
将组件input框中的数据清空， 组件改为隐藏， 修改icon颜色，触发父组件的resetChange方法
resetData () {
console.log('reset')
<template>
<span style="margin-left: 10px">
<el-button :type="type" :icon="icon" :size="size" @click="reset()">{{
BtnName
}}</el-button>
</span>
</template>
<script>
export default {
props: {
当然玩归玩，作为一名
Vue
爱好者，我们理应深入游戏内部，一探代码的实现。接下来我们就先来分析一下要完成这样的一个游戏，主要需要实现哪些功能。下面我就直接将此实例的功能点罗列在下了：
1.随机生成1~15的数字格子，每一个数字都必须出现且仅出现一次
2.点击一个数字方块后，如其上下左右有一处为空，则两者交换位置
3.格子每移动一步，我们都需要校验其是否闯关成功
4.点击
重置
游戏
按钮
后需对拼图进行重新排序
以上便是本实例的主要功能点，可见游戏功能并不复杂，我们只需一个个攻破就OK了，接下来我就来展示一下各个功能点的
Vue
代码。
这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份
2.在清空
按钮
事件触发后，再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch
注意：这里一定还要是深拷贝，
this.userFormSearch = this.defaultUserFormSearch;(这种做法是错误的);
