请写出一个基于MVVM的个人信息管理系统的设计与实现的程序代码
时间: 2023-09-18 21:08:18 浏览: 45
好的,以下是一个简单的基于MVVM架构的个人信息管理系统的程序代码示例(使用Vue.js框架和Element UI库):
HTML代码:
```
<div id="app">
<el-input v-model="searchKeyword" placeholder="请输入关键字搜索"></el-input>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-form :model="editForm" ref="editForm" :rules="rules" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="editForm.age"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="editForm.address"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSave">确 定</el-button>
</div>
</el-dialog>
</div>
```
JavaScript代码:
```
var app = new Vue({
el: '#app',
data: {
tableData: [
{ name: '张三', age: 20, address: '北京市海淀区' },
{ name: '李四', age: 25, address: '上海市浦东新区' },
{ name: '王五', age: 30, address: '广州市天河区' }
],
searchKeyword: '',
dialogVisible: false,
editForm: {
name: '',
age: '',
address: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' }
]
}
},
methods: {
handleEdit: function(row) {
this.editForm = Object.assign({}, row);
this.dialogVisible = true;
},
handleDelete: function(row) {
var index = this.tableData.indexOf(row);
if (index !== -1) {
this.tableData.splice(index, 1);
}
},
handleSave: function() {
this.$refs.editForm.validate(function(valid) {
if (valid) {
if (this.editForm.id) {
var index = this.tableData.findIndex(function(item) {
return item.id === this.editForm.id;
}.bind(this));
if (index !== -1) {
this.tableData.splice(index, 1, this.editForm);
}
} else {
this.tableData.push(Object.assign({ id: Date.now() }, this.editForm));
}
this.dialogVisible = false;
} else {
return false;
}
}.bind(this));
}
},
computed: {
filteredTableData: function() {
return this.tableData.filter(function(item) {
return item.name.indexOf(this.searchKeyword) !== -1 || item.address.indexOf(this.searchKeyword) !== -1;
}.bind(this));
}
}
});
```
这个示例实现了一个简单的个人信息管理系统,包括查询、添加、编辑和删除个人信息的功能。其中,数据模型和业务逻辑都被封装在视图模型中,用户界面则通过Vue.js框架和Element UI库进行实现。