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 ...
随机推荐
- C# FileInfo 类
FileInfo类不像File类,它没有静态方法,仅可用于实例化的对像.FileInfo对像表示在磁盘或网络位置的文件,注意它不是流,为了读写文件,必须创建Stream对像. fileInfo类提供了 ...
- Load事件中控件Focus()无效解决办法
原因:Load窗体时,窗体未显示 解决:1.Focus()之前添加this.Show(); 2.在Shown事件中添加Focus()
- html +css 登陆框中加用户图片，并设置登陆名不盖住图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 小象学院Python数据分析第二期【升级版】
点击了解更多Python课程>>> 小象学院Python数据分析第二期[升级版] 主讲老师: 梁斌 资深算法工程师 查尔斯特大学(Charles Sturt University)计 ...
- DevOps - 日志分析 -ELK
wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-co ...
- 了解并使用springAOP(面向切面编程)
Aop是干嘛的为什么要使用它 在业务系统中,总有一些散落,渗透到系统的各处且不得不处理的事情,这些穿插在既定业务中的操作就是所谓的“横切逻辑”,也称切面, 我们怎样才不受这些附加要求的干扰,专心于真正 ...
- 使用VUE开发
<一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...
- BFS：Nightmare（可返回路径）
解题心得: 1.point:关于可以返回路径的BFS的标记方法,并非是简单的0-1,而是可以用时间比较之后判断是否push. 2.queue创建的地点(初始化问题),在全局中创建queue在一次调用B ...
- 笔记-python-standard library-8.5.heapq
笔记-python-standard library-8.5.heapq 1. heapq-heap queue algorithm源码:Lib/heapq.pythis module provide ...
- 定时任务之crond服务
计划任务分为一次性计划任务与长期性计划任务 一次性计划任务:今天11:25执行重启网卡操作,执行结束 即任务消失 一次性计划任务格式: 创建:"at 时间" #默认采用的是交互式 ...