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 ...
随机推荐
- 问题001：Java软件，属于系统软件还是应用软件呢？
在学习Java前要掌握的一些小问题: 问题一:Java软件,属于系统软件还是应用软件呢? java语言应用在计算机系统上,首先应知道计算机系统分为几部分? 计算机系统由硬件系统和软件系统两部分构成.硬 ...
- 2017年9月22日作业 c++算术运算符 自增 自减 逻辑运算符 位运算符 条件运算符（三元运算符）
作业1: c++算术运算符试题,分析下面程序的输出结果是什么 //第一个: int x=8999;int value=x*1000/1000; //第二个 int x=8999;int value=x ...
- win10搭建FTP服务器
下面就给大家讲解Win10搭建FTP服务器的详细操作方法. 1.首先,我们在Cortana中搜索控制面板并进入: 2.在控制面板-程序中,点击启用或关闭Windows功能: 3.在FTP服务器.Web ...
- 算法竞赛入门经典5.1 从c到c++
这个章节主要是讲述了一些c++的特性,在这里面,对我用处最大的应该就是字符串吧.首先是getline,getchar,stringstream的使用了吧. 首先介绍这三个函数. 1. getline函 ...
- git提交时报错 permission denied
git push 时报错:permission denied xxx 目前很多解决办法是生成公钥和秘钥,这种方法安全可靠,比较适用于一台电脑对应一个git账户,但是多个账户在同一台电脑上提交使用git ...
- Python中关于集合的介绍及用法
一.集合的含义及创建方法 集合(set)是一种无序的并且里面存放不同元素的序列. 集合可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因 ...
- STM32启动文件：startup_stm32f10x_hd.s等启动文件的简单描述
在官方的库文件中,分别有如下文件: startup │ │ │ ├─arm │ │ │ │ startup_stm32f10x_cl.s │ │ │ │ startup_stm32f10x_hd.s ...
- 【Akroma, Angel of Fury】完成svn环境搭建
昨天的那篇博文恰恰是实验室所干的事儿 但是那是一种很投机取巧的方式完成的多project管理方式 来看看我建立环境的方法 首先,找一个比较闲的公用服务器(为什么不用自己的?有公共资源不用,你傻啊?), ...
- [洛谷P1168]中位数（Splay）/（主席树）
Description 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[2], -, A[2k - 1]的中位数.即前1,3,5,--个数的 ...
- 自定义 popWindow弹框 工具包
前言:因为Android 没有像IOS一样的ActionSheet,虽然在github上看到有一些类似ActionSheet的库,总觉得不好用,不如自己写一个弹框通用类,样式全部自已来多好. Step ...