elementui 表单输入完内容后, 点击暂存按钮,输入的内容将暂存,刷新后也还会显示在页面上,代码怎么写?
时间: 2024-05-13 17:17:24 浏览: 52
你可以将表单数据存储在浏览器的本地存储中,例如使用 localStorage。在用户输入完成后,点击暂存按钮时,将表单数据存储在 localStorage 中。每次页面加载时,检查本地存储中是否存在表单数据,如果存在,则将其填充到表单中。
以下是一个示例代码:
```html
<template>
<div>
<el-form ref="form" :model="formData" label-width="120px">
<el-form-item label="姓名">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="formData.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveData">暂存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
age: null
}
}
},
mounted() {
// 检查本地存储中是否存在表单数据
const savedData = localStorage.getItem('form-data')
if (savedData) {
this.formData = JSON.parse(savedData)
}
},
methods: {
saveData() {
// 将表单数据存储在本地存储中
localStorage.setItem('form-data', JSON.stringify(this.formData))
}
}
}
</script>
```
阅读全文