el-drawer数据回显
时间: 2023-11-09 14:03:26 浏览: 111
el-drawer 是一个 Vue.js 组件,用于创建抽屉式的侧边栏。要实现数据回显,可以在 el-drawer 中使用表单组件,将表单的数据绑定到一个对象上,然后在关闭 el-drawer 时,将这个对象的值重置为原始值。
具体实现步骤如下:
1. 在 el-drawer 中使用表单组件,例如 el-form。
2. 将表单的数据绑定到一个对象上,例如 formData。
3. 在打开 el-drawer 时,将 formData 的值设置为需要回显的值。
4. 在关闭 el-drawer 时,将 formData 的值重置为原始值。
示例代码如下:
```
<template>
<el-drawer :visible.sync="drawerVisible">
<el-form :model="formData">
<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>
<div slot="footer">
<el-button @click="resetFormData">取消</el-button>
<el-button type="primary" @click="saveFormData">保存</el-button>
</div>
</el-drawer>
</template>
<script>
export default {
data() {
return {
drawerVisible: false,
formData: {
name: '',
age: 0
},
originalFormData: {
name: '',
age: 0
}
}
},
methods: {
openDrawer() {
// 打开 el-drawer 时,将 formData 的值设置为需要回显的值
this.formData = {
name: '张三',
age: 18
}
this.originalFormData = { ...this.formData }
this.drawerVisible = true
},
closeDrawer() {
// 关闭 el-drawer 时,将 formData 的值重置为原始值
this.formData = { ...this.originalFormData }
this.drawerVisible = false
},
resetFormData() {
// 点击取消按钮时,将 formData 的值重置为原始值
this.formData = { ...this.originalFormData }
this.drawerVisible = false
},
saveFormData() {
// 点击保存按钮时,保存 formData 的值,并关闭 el-drawer
// ...
this.drawerVisible = false
}
}
}
</script>
```
阅读全文