重置功能的实现
<template>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-model-item label="Activity name">
<a-input v-model="form.name" />
</a-form-model-item>
<a-form-model-item label="Activity zone">
<a-select v-model="form.region" placeholder="please select your zone">
<a-select-option value="shanghai">
Zone one
</a-select-option>
<a-select-option value="beijing">
Zone two
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="Activity time">
<a-date-picker
v-model="form.date1"
show-time
type="date"
placeholder="Pick a date"
style="width: 100%;"
/>
</a-form-model-item>
<a-form-model-item label="Instant delivery">
<a-switch v-model="form.delivery" />
</a-form-model-item>
<a-form-model-item label="Activity type">
<a-checkbox-group v-model="form.type">
<a-checkbox value="1" name="type">
Online
</a-checkbox>
<a-checkbox value="2" name="type">
Promotion
</a-checkbox>
<a-checkbox value="3" name="type">
Offline
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
<a-form-model-item label="Resources">
<a-radio-group v-model="form.resource">
<a-radio value="1">
Sponsor
</a-radio>
<a-radio value="2">
Venue
</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item label="Activity form">
<a-input v-model="form.desc" type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button @click="reset">
重置
</a-button>
<a-button type="primary" @click="onSubmit" style="margin-left: 10px;">
恢复
</a-button>
</a-form-model-item>
</a-form-model>
</template>
<script>
export default {
data() {
return {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
form: {
name: '',
region: undefined,
date1: undefined,
delivery: false,
type: [],
resource: '',
desc: '',
},
};
},
methods: {
reset () {
Object.assign(this.$data, this.$options.data())
},
onSubmit() {
console.log('submit!', this.form);
},
},
};
</script>
PS:
- 框架为我们封装了
this.$options
,在vue中$$
属于框架底层的属性,不要碰。这样就能够拿到初始时的data数据。 this.$data
取得的是组件内的data,在重置时如果直接赋值会报错
this.$data = this.$options.data()
- 通过
Object.assign(this.$data, this.$options.data())
去重置整个data中数据,这样就不用通过字面量去赋值清空,减少了以后新增字段的维护成本
恢复功能的实现
<template>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-model-item label="Activity name">
<a-input v-model="form.name" />
</a-form-model-item>
<a-form-model-item label="Activity zone">
<a-select v-model="form.region" placeholder="please select your zone">
<a-select-option value="shanghai">
Zone one
</a-select-option>
<a-select-option value="beijing">
Zone two
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="Activity time">
<a-date-picker
v-model="form.date1"
show-time
type="date"
placeholder="Pick a date"
style="width: 100%;"
/>
</a-form-model-item>
<a-form-model-item label="Instant delivery">
<a-switch v-model="form.delivery" />
</a-form-model-item>
<a-form-model-item label="Activity type">
<a-checkbox-group v-model="form.type">
<a-checkbox value="1" name="type">
Online
</a-checkbox>
<a-checkbox value="2" name="type">
Promotion
</a-checkbox>
<a-checkbox value="3" name="type">
Offline
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
<a-form-model-item label="Resources">
<a-radio-group v-model="form.resource">
<a-radio value="1">
Sponsor
</a-radio>
<a-radio value="2">
Venue
</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item label="Activity form">
<a-input v-model="form.desc" type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button @click="reset">
重置
</a-button>
<a-button type="primary" @click="recover" style="margin-left: 10px;">
恢复
</a-button>
</a-form-model-item>
</a-form-model>
</template>
<script>
export default {
data() {
return {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
form: {
name: '',
region: undefined,
date1: undefined,
delivery: false,
type: [],
resource: '',
desc: '',
},
};
},
created () {
// 模拟接口返回
setTimeout (() => {
this.form = {
name: 'asdadada',
region: 'shanghai',
date1: undefined,
delivery: true,
type: ['1'],
resource: '1',
desc: 'asdasdada',
}
this.original = JSON.parse(JSON.stringify(this.$data))
}, 1000)
},
methods: {
reset () {
console.log('this.$data', this.$data)
Object.assign(this.$data, this.$options.data())
},
recover () {
console.log('this.$data', this.$data)
Object.assign(this.$data, JSON.parse(JSON.stringify(this.original)))
},
}
};
</script>
PS:
在接口数据返回时,使用临时变量将返回的数据存起来,在点恢复的时候恢复
使用mixins优化
- recoverMixin.js
export default {
// updated () {
// 只执行一次 如果遇上多次更新组合合成最终数据,是不稳定的
// if (!this.isSecond && this.$options.created) {
// this.isSecond = true
// this.original = JSON.parse(JSON.stringify(this.$data))
// }
// },
methods: {
save () {
// 深拷贝 备份数据
this.original = JSON.parse(JSON.stringify(this.$data))
},
reset () {
console.log('this.$data', this.$data)
Object.assign(this.$data, this.$options.data())
},
recover() {
console.log('this.$data', this.$data)
Object.assign(this.$data, JSON.parse(JSON.stringify(this.original)))
},
},
}
PS:
在生命周期updated中可以拿到最新的data数据,但是如果遇上多次更新组合合成最终数据,是不稳定的。所以写一个方法save方法,在需要保存data数据的时候调用。
<template>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-model-item label="Activity name">
<a-input v-model="form.name" />
</a-form-model-item>
<a-form-model-item label="Activity zone">
<a-select v-model="form.region" placeholder="please select your zone">
<a-select-option value="shanghai">
Zone one
</a-select-option>
<a-select-option value="beijing">
Zone two
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="Activity time">
<a-date-picker
v-model="form.date1"
show-time
type="date"
placeholder="Pick a date"
style="width: 100%;"
/>
</a-form-model-item>
<a-form-model-item label="Instant delivery">
<a-switch v-model="form.delivery" />
</a-form-model-item>
<a-form-model-item label="Activity type">
<a-checkbox-group v-model="form.type">
<a-checkbox value="1" name="type">
Online
</a-checkbox>
<a-checkbox value="2" name="type">
Promotion
</a-checkbox>
<a-checkbox value="3" name="type">
Offline
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
<a-form-model-item label="Resources">
<a-radio-group v-model="form.resource">
<a-radio value="1">
Sponsor
</a-radio>
<a-radio value="2">
Venue
</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item label="Activity form">
<a-input v-model="form.desc" type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button @click="reset">
重置
</a-button>
<a-button type="primary" @click="recover" style="margin-left: 10px;">
恢复
</a-button>
</a-form-model-item>
</a-form-model>
</template>
<script>
import recoverMixin from '@/mixins/recoverMixin';
export default {
mixins: [recoverMixin],
data() {
return {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
form: {
name: '',
region: undefined,
date1: undefined,
delivery: false,
type: [],
resource: '',
desc: '',
},
};
},
created () {
// 模拟接口返回
setTimeout (() => {
this.form = {
name: 'asdadada',
region: 'shanghai',
date1: undefined,
delivery: true,
type: ['1'],
resource: '1',
desc: 'asdasdada',
}
this.save()
}, 1000)
}
};
</script>