vue表单数据加载/重置

实际项目中，我们的一些表单经常有默认值，在Vue中，我们可以直接在data中设置默认值。

export default data() {return {formData: {name: '',region: '',type: '1' //默认值}};
}

但是，在表单被使用过（新增或者编辑过其他行）后，如何将其恢复到原始状态呢？
有的做法可能是这样：

this.formData={}

但是这样只能清空所有值，默认值并不能恢复。难道一个个的重新手动赋值吗？当然可以，就是比较麻烦。好在vue帮我们保存了一份原始数据，直接把data复制为原始数据即可

this.formData=this.$options.data().formData

但是在用element表单验证时，这种方法存在一个问题，就是表单的验证提示没有重置，调用表单的resetFields方法即可。

this.$refs.editForm.resetFields()

整体代码如下：

<template >
<el-form label-width="80px" :model="formData" ref="editForm"><el-form-item label="名称"><el-input v-model="formData.name"></el-input></el-form-item><el-form-item label="活动区域"><el-input v-model="formData.region"></el-input></el-form-item><el-form-item label="活动形式"><el-select v-model="formData.type"><el-option label="线下" value="1"></el-option><el-option label="线上" value="2"></el-option></el-select></el-form-item>
</el-form>
</template ><script>
export default {data() {return {formData: {name: '',region: '',type: '1'}};},methods: {loadFormData: function(data){if (this.$refs['editForm']) {// 重置表单验证this.$refs.editForm.resetFields()}if (!data) {this.formData = this.$options.data().formData} else {this.formData = Object.assign({}, row)}}}
}
</script>

vue表单数据加载/重置相关推荐

Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
如何在 InfoPath 2003 表单中动态加载数据
转自微软:http://support.microsoft.com/kb/896451/zh-cn 概要简介更多信息创建新的虚拟目录设计 Microsoft Office InfoPath 2 ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
vue的route懒加载
vue的route懒加载为什么用懒加载像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,用户会将这个打包后的js代码加载进来,需要加载的内 ...
[vue] SPA首屏加载速度慢的怎么解决？
[vue] SPA首屏加载速度慢的怎么解决? 1.通过Gzip压缩 2.使用路由懒加载 3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小 ...
前端vue里面点击加载更多_vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...

vue表单数据加载/重置

vue表单数据加载/重置相关推荐

最新文章

热门文章