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 ...
随机推荐
- Oracle 自动生成hive建表语句
从 oracle 数据库导数到到 hive 大数据平台,需要按照大数据平台的数据规范,重新生成建表的 SQL 语句,方便其间,写了一个自动生成SQL的存储过程. ① 创建一张表,用来存储源表的结构,以 ...
- 在mac下使用python抓取数据
2015已经过去,这是2016的第一篇博文! 祝大家新年快乐! 但是我还有好多期末考试! 还没开始复习,唉,一把辛酸泪! 最近看了一遍彦祖的文章叫做 iOS程序员如何使用Python写网路爬虫 所以自 ...
- 【NTT】loj#6261. 一个人的高三楼
去年看过t老师写这题博客:以为是道神仙题 题目大意 求一个数列的$k$次前缀和.$n\le 10^5$. 题目分析 [计数]cf223C. Partial Sums 加强版.注意到最后的式子是$f_i ...
- PhotoSwipe图片展示插件
这个插件相当棒!功能也很强大,可以自行体会. 官方网址:http://www.photoswipe.com/ github地址:https://github.com/codecomputerlove/ ...
- 【PHP】$_SERVER整理
PHP变成中经常需要用到服务器的一些资料,我在这里整理一下,方便查找.第一部分为比较常用的$_SERVER $_SERVER['HTTP_ACCEPT_LANGUAGE']//浏览器语言 $_SERV ...
- python 爬虫豆瓣top250
网页api:https://movie.douban.com/top250?start=0&filter= 用到的模块:urllib,re,csv 捣鼓一上午终于好了,有些小问题 (top21 ...
- (转)RubyGems常用命令
什么是RubyGems? RubyGems是一个方便而强大的Ruby程序包管理器,Ruby的第三方插件是用gem方式来管理,非常容易发布和共享,一个简单的命令就可以安装上第三方的扩展库.特点:能远程安 ...
- 13，scrapy框架的日志等级和请求传参
今日概要 日志等级 请求传参 如何提高scrapy的爬取效率 一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy ...
- P3805 【模版】manacher算法（manacher）
P3805 [模版]manacher算法 题目描述 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 字符串长度为n 输入输出格式 输入格式: 一行小写英文字符a ...
- TCP/IP网络编程之进程间通信
进程间通信基本概念 进程间通信意味着两个不同进程间可以交换数据,为了完成这一点,操作系统中应提供两个进程可以同时访问的内存空间.但我们知道,进程具有完全独立的内存结构,就连通过fork函数创建的子进程 ...