Vue实现增删改查功能
简单的表单CURD功能demo
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/vueCurd420.css" />
<style>
/*
*/ #grid-template,
#dialog-template {
display: none;
}
</style>
</head> <body>
<div id="app">
<div class="container">
<div class="form-group">
<label>Search</label>
<input type="text" class="search-input" v-model="searchQuery" />
</div> </div>
<div class="container">
<simple-grid :data-list="people" :columns="columns" :search-key="searchQuery">
</simple-grid>
</div>
</div> <template id="grid-template">
<table>
<thead>
<tr>
<th v-for="col in columns">
{{ col.name | capitalize}}
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody>
<tr v-for="(index,entry) in dataList | filterBy searchKey">
<td v-for="col in columns">
<span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(entry[col.name])">{{entry[col.name]}}</a></span>
<span v-else>{{entry[col.name]}}</span>
</td>
<td class="text-center">
<button class="btn-danger" @click="deleteItem(entry)">delete</button>
</td>
</tr>
</tbody>
</table>
<div class="container">
<button class="btn" @click="openNewItemDialog('Create New Item')">Create</button>
</div> <modal-dialog :mode="mode" :title="title" :item="item" :fields="columns" v-on:create-item="createItem" v-on:update-item="updateItem">
</modal-dialog> </template> <template id="dialog-template">
<div class="dialogs">
<div class="dialog" v-bind:class="{ 'dialog-active': show }">
<div class="dialog-content">
<header class="dialog-header">
<h1 class="dialog-title">{{ title }}</h1>
</header>
<div class="dialog-body">
<div v-for="field in fields" class="form-group">
<label>{{ field.name }}</label>
<select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
<option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
</select>
<input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
</div>
</div>
<footer class="dialog-footer">
<div class="form-group">
<label></label>
<button class="btn-save" v-on:click="save">Save</button>
<button class="btn-close" v-on:click="close">Close</button>
</div>
</footer>
</div>
</div>
<div class="dialog-overlay"></div>
</div>
</template> <script src="js/vue.js"></script>
<script>
Vue.component('simple-grid', {
template: '#grid-template',
props: ['dataList', 'columns', 'searchKey'],
data: function() {
return {
mode: 0,
title: '',
keyColumn: '',
item: {}
}
},
ready: function() {
for(var i = 0; i < this.columns.length; i++) {
if(this.columns[i].isKey) {
this.keyColumn = this.columns[i]['name']
break;
}
}
},
methods: {
openNewItemDialog: function(title) {
// 对话框的标题
this.title = title
// mode = 1表示新建模式
this.mode = 1
// 初始化this.item
this.item = {}
// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
this.$broadcast('showDialog', true)
},
openEditItemDialog: function(key) {
// 根据主键查找当前修改的数据
var currentItem = this.findItemByKey(key)
// 对话框的标题
this.title = 'Edit Item - ' + key
// mode = 2表示修改模式
this.mode = 2
// 将选中的数据拷贝到this.item
this.item = this.initItemForUpdate(currentItem)
// 广播事件，传入参数true表示显示对话框
this.$broadcast('showDialog', true)
},
// 弹出修改数据的对话框时，使用对象的深拷贝
initItemForUpdate(p, c) {
c = c || {};
for(var i in p) {
// 属性i是否为p对象的自有属性
if(p.hasOwnProperty(i)) {
// 属性i是否为复杂类型
if(typeof p[i] === 'object') {
// 如果p[i]是数组，则创建一个新数组
// 如果p[i]是普通对象，则创建一个新对象
c[i] = Array.isArray(p[i]) ? [] : {};
// 递归拷贝复杂类型的属性
this.initItemForUpdate(p[i], c[i]);
} else {
// 属性是基础类型时，直接拷贝
c[i] = p[i];
}
}
}
return c;
},
findItemByKey: function(key) {
var keyColumn = this.keyColumn
for(var i = 0; i < this.dataList.length; i++) {
if(this.dataList[i][keyColumn] === key) {
return this.dataList[i]
}
}
},
itemExists: function() {
var keyColumn = this.keyColumn
for(var i = 0; i < this.dataList.length; i++) {
if(this.item[keyColumn] === this.dataList[i][keyColumn])
return true;
}
return false;
},
createItem: function() {
var keyColumn = this.keyColumn
if(!this.itemExists()) {
// 将item追加到dataList
this.dataList.push(this.item)
// 广播事件，传入参数false表示隐藏对话框
this.$broadcast('showDialog', false)
// 新建完数据后，重置item对象
this.item = {}
} else {
alert(keyColumn + ' "' + this.item[keyColumn] + '" is already exists')
} },
updateItem: function() { // 获取主键列
var keyColumn = this.keyColumn for(var i = 0; i < this.dataList.length; i++) {
// 根据主键查找要修改的数据，然后将this.item数据更新到this.dataList[i]
if(this.dataList[i][keyColumn] === this.item[keyColumn]) {
for(var j in this.item) {
this.dataList[i][j] = this.item[j]
}
break;
}
}
// 广播事件，传入参数false表示隐藏对话框
this.$broadcast('showDialog', false)
// 修改完数据后，重置item对象
this.item = {}
},
deleteItem: function(entry) {
var data = this.dataList
data.forEach(function(item, i) {
if(item === entry) {
data.splice(i, 1)
return
}
})
}
},
components: {
'modal-dialog': {
template: '#dialog-template',
data: function() {
return {
// 对话框默认是不显示的
show: false
}
},
/*
* mode = 1是新增数据模式，mode = 2是修改数据模式
* title表示对话框的标题内容
* fields表示对话框要显示的数据字段数组
* item是由simple-dialog传下来，用于绑定表单字段的
*/
props: ['mode', 'title', 'fields', 'item'],
methods: {
close: function() {
this.show = false
},
save: function() {
if(this.mode === 1) {
// 使用$dispatch调用simple-grid的create-item事件
this.$dispatch('create-item')
} else if(this.mode === 2) {
// 使用$dispatch调用simple-grid的update-item事件
this.$dispatch('update-item')
}
}
},
events: {
'showDialog': function(show) {
this.show = show
}
}
}
}
}) var demo = new Vue({
el: '#app',
data: {
searchQuery: '',
columns: [{
name: 'name',
isKey: true
}, {
name: 'age'
}, {
name: 'sex',
dataSource: ['Male', 'Female']
}],
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
})
</script> </body> </html>
参考https://keepfool.github.io/vue-tutorials/02.Components/Part-2/demo/step05.html
Vue实现增删改查功能的更多相关文章
- vue实现增删改查（内附源代码）
VUE+Element实现增删改查 @ 目录 VUE+Element实现增删改查 前言 实验步骤 总结: 源代码 前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删 ...
- Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能，无需写任何代码)
JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式 (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...
- 使用MVC5+Entity Framework6的Code First模式创建数据库并实现增删改查功能
此处采用VS2017+SqlServer数据库 一.创建项目并引用dll: 1.创建一个MVC项目 2.采用Nuget安装EF6.1.3 二.创建Model 在models文件夹中,建立相应的mode ...
- IDEA搭建SSM实现登录、注册，数据增删改查功能
本博文的源代码:百度云盘/java/java实例/SSM实例/SSM实现登录注册,增删改查/IDEA搭建SSM实现登录,注册,增删改查功能.zip 搭建空的Maven项目 使用Intellij id ...
- BootstrapTable与KnockoutJS相结合实现增删改查功能
http://www.jb51.net/article/83910.htm KnockoutJS是一个JavaScript实现的MVVM框架.通过本文给大家介绍BootstrapTable与Knock ...
- springmvc+spring3+hibernate4框架简单整合,简单实现增删改查功能
转自:https://blog.csdn.net/thinkingcao/article/details/52472252 C 所用到的jar包 数据库表 数据库表就不用教大家了,一张表,很简 ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- 使用Bootstrap模态框实现增删改查功能
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 本文实现的是使用模态框实现简单的增删改查的功能. ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
随机推荐
- 1045: [HAOI2008] 糖果传递
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4897 Solved: 2457[Submit][Status][Discuss] Descript ...
- PHP数据库扩展 - PDO操作
PDO操作 PDO操作 描述:odp是php对数据库操作统一化的操作 语法:$pdo = new PDO("DB名:host=主机名;dbname=DB名","DB账号& ...
- Mysql主从数据同步cheksum问题
做主从同步时出现问题,show slave status显示错误: Last_IO_Error: Got fatal error from master when reading data from ...
- linux磁盘满了怎么办？？删掉无用的大文件
今天公司网站突然无法访问,因为之前遇到过是因为磁盘问题,所以使用 df 命令查看结果,结果果然是有100%的东西,那么怎么解决呢,我们想到得查找大文件,并删掉无用的大文件比如log 那么linux如何 ...
- 数据结构-队列(Queue)
#include <stdio.h> #include <stdlib.h> #define LIST_INIT_SIZE 10 #define LISTINCREMENT 1 ...
- B1007 素数对猜想
B1007 素数对猜想 让我们定义\(d_n\)为:\(d_n =p_{n+1}−p_n\),其中\(p_i\)是第i个素数.显然有\(d_1=1\),且对于n>1有\(d_n\)是偶数.&qu ...
- A1012 The Best Rank (25)（25 分）
A1012 The Best Rank (25)(25 分) To evaluate the performance of our first year CS majored students, we ...
- Leetcode 106. 从中序与后序遍历序列构造二叉树
题目链接 https://leetcode.com/problems/construct-binary-tree-from-inorder-and-postorder-traversal/descri ...
- getsupportfragmentmanager 没有这个方法
让activity继承自fragmentactivity就行了.
- Redis实现之字典跳跃表
跳跃表 跳跃表是一种有序数据结构,它通过在每个节点中维持多个指向其他节点的指针,从而达到快速访问节点的目的.跳跃表支持平均O(logN).最坏O(N)的时间复杂度查找,还可以通过顺序性操作来批量处理节 ...