自己给vue2.0第三方组件库打补丁的一种方法
demo预览：
https://sunzsh.github.io/vue-demos/#/form-reset
demo代码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/form-reset.vue
组件代码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/components/elFormreInitialValue.js
elementUI的表单组件里有一个重置功能
它可以重置成这个表单最初的样子
但是呢我发现它有个问题
就是假如我这是一个修改界面
我在页面加载的时候
就会初始化一些值上来，像这样
然后呢如果在页面上修改一些东西
这时候再点重置是希望他回到
修改最初的那个样子
但是大家看
他就恢复成空值了
具体的原因一会带大家分析哈
先给大家分享这个解决方案
就是这个插件类似于补丁的插件
有50多行代码吧
然后呢
我们把这个插件放到本地项目里
再main.js里呢把这个插件安装一下
这样的话呢
我们在这页面上如果想...
在这比如说我们初始化的这个值了
我们想在这把这些值
作为他以后点重置的时候恢复的值
怎么办呢
我们调这行的代码
就是我们找到这个form的ref
然后呢调这个reInitialResetValue
这个方法
就是我们通过补丁文件加进去的
然后我们再来分析它原生这个组件
不行的原因
首先呢我们正常点reset
它是调这个resetFileds
这是（elementui）原生的重置方法
所以我们先来看一下这resetFileds
是怎么写的
我们先去找到这个form（el-form）
然后呢我们在这里搜reset fields
在这里
大家看，它是循环这个表单里所有的字段
然后呢
让每一个字段调用它的resetFiled方法
这个field字段是什么呢
其实就是我们常写的这个form item
我们打开form-item（源码）之后啊
还是搜索啊
reset，大家看 在这里reset field
然后呢其他的代码不重要
最重要的是在这在赋值
就是你点那个重置之后啊
他让每一个form-item的值
等于他这个initialValue
注意这里数组他做了一个克隆的操作
至于为什么这样克隆一份
留给大家思考哈
我们就说它这个initialValue是怎么来的
我们再搜这个initial value
在这里大家看
在每一个form-item的mounted的里边
它去取这个属性值
然后呢，还是 如果是数组做了一下克隆
然后注意这儿最重要的是
这儿
它声明了一个只读的initialValue属性
在这里这样声明的属性只是指读的
同时
因为他在这里没有加这个configureable
所以呢他这个属性也是没法
删掉和重新设置的
所以他做的比较绝
那怎么办呢
其实我们最终的目标
首先就需要在这加一个configurable
等于true，这样的话呢
这个属性是可以重新设置的
第二的话呢我们再去重新
去设置这个initialValue的这个value值
就可以了
所以啊我们可以写一个小插件
像这样准备一个新的文件
这里边先把
它原声的form-item和form导进来
为什么导form我们一会再说哈
我们先说form-item
导进来之后我们把它的这个mounted删掉
然后呢我们自己写一个组件
继承原来这个FormItem
然后我们做两件事
第一个呢
我们在mounted里边
原封不动拿过来代码
加一个configurable=true
这样的话呢
这个属性
后期就可以被重新去设置了
然后我们就可以增加一个方法
就要去重新设置这个initial的这个value
好有了这个方法之后
这个表单里的每一个元素
是可以被重新设置这个初始化的值的
对吧
但是我们不能一个一个去设置嘛
所以我们还需要把form导进来
给form增加一个（统一管理的）reInitialResetValue
我们在这form里边循环去修改
所有的字段的这个值
最终呢我们写一个
安装插件的入口
在这里呢
把原来的这个FormItem和Form覆盖掉
用我们新写的这个组件
然后我们在使用的时候就简单了
只要找到这个Form组件
直接调我们新写的这个方法
它就可以了
那我们了解了他之前不行的原因之后
有同学可能会想到
既然他之前这个initialValue啊
是在这个mounted的里边写的
那是不是我们在mounted的之前
把这个filedValue附上值就可以了呢
没错！但我们来试一下啊
我们在这个...
我先把这个方法注掉
我们不去调这个（reInitialResetValue）
然后呢
原来我是在mounted里设置的这个initValues()
这回呢我们把它改成before mount
我们来试一下啊
刷新一下
看看我随便改两个重置它也可以
但是呢这个方案还是有一些局限性的
为什么呢
因为我现在是为了演示啊
这些赋值的代码都是写死的
大多数情况下我们在这是需Ajax查询
然后异步写进来
如果是异步的话呢，代码是不等的
这还没付上值呢
这边mounted他就走了
好最后呢还是老规矩
这个补丁文件的代码啊
我还是放到github上
然后这个入口呢
我也会放到1024bugs里面
最后更新于