Vue+element基本增删改查
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="./modules/Vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./modules/Axios/axios.js" type="text/javascript" charset="utf-8"></script>
<script src="./modules/Element-ui/index.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./modules/Element-ui/theme-chalk/index.css" />
<title></title>
</head> <body>
<div id="app">
<el-row :gutter="20">
<el-col :span="8">
<el-input v-model="userInfo.name" placeholder="请输入姓名"></el-input>
</el-col>
<el-col :span="5">
<el-date-picker v-model="userInfo.birthday" placeholder="选择生日" format="yyyy年MM月dd日" value-format="yyyy-MM-dd">
</el-date-picker>
</el-col>
<el-col :span="11">
<el-input v-model="userInfo.address" placeholder="请输入地址"></el-input>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 10px;">
<el-col :span="24">
<el-button type="primary" @click="addUser">增加</el-button>
</el-col>
</el-row> <el-table :data="UserList">
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column label="姓名" prop="name" width="200"></el-table-column>
<el-table-column label="生日" prop="birthday" width="200"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="editUser(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="delUser(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 编辑 -->
<el-dialog title="编辑" :visible.sync="editDialogVisible">
<el-form ref="form" :model="newUser" label-width="60px">
<el-form-item label="姓名">
<el-input v-model="newUser.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="生日">
<el-date-picker v-model="newUser.birthday" placeholder="选择生日" format="yyyy年MM月dd日" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="newUser.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveUser">确 定</el-button>
</div>
</el-dialog>
<!-- 删除 -->
<el-dialog title="提示" :visible.sync="delDialogVisible" width="30%">
<span slot="footer" class="dialog-footer">
<el-button @click="delDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="delDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div> <script>
var vm = new Vue({
el: "#app",
data() {
return {
userInfo: {
name: '',
birthday: '',
address: ''
},
UserList: [],
delDialogVisible: false,
editDialogVisible: false,
newUser: {
name: '',
birthday: '',
address: ''
},
userIndex: 0
}
},
methods: {
addUser() {
this.UserList.push(this.userInfo);
this.userInfo = {
name: '',
birthday: '',
address: ''
}
},
editUser(index, item) {
this.userIndex = index;
this.newUser = {
name: item.name,
birthday: item.birthday,
address: item.address
}
this.editDialogVisible = true;
},
delUser(index) {
this.$confirm('确认删除？')
.then(_ => {
this.UserList.splice(index, 1)
})
.catch(_ => { });
},
saveUser() {
this.editDialogVisible = false;
Vue.set(this.UserList, this.userIndex, this.newUser);
}
}
})
</script>
</body> </html>
增加
修改
删除
Vue+element基本增删改查的更多相关文章
- ABP+NetCore+Vue.js实现增删改查
ABP我就不多介绍了,不知道的可以自己百度 本篇开发工具VS2017,数据库SQL SERVER2012,系统Win7 1.去ABP官网下载对应的模板,下载地址:https://aspnetboile ...
- 一起学Vue：CRUD(增删改查)
目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...
- Vue表格数据增删改查及搜索
<div id="app"> <div class="item"> <span class="name"> ...
- Vue.js——3.增删改查
vue 写假后台 bootstrap 做的样式 代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- vue实现增删改查（内附源代码）
VUE+Element实现增删改查 @ 目录 VUE+Element实现增删改查 前言 实验步骤 总结: 源代码 前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删 ...
- webpack4+express+mongodb+vue 实现增删改查
在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
- vue实现对表格数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
随机推荐
- canal同步异常：当表结构变化时，同步失败
场景 canal 同步Mysql一段时间后突然失败,报如如下错误: 2021-08-06 16:16:51.732 [MultiStageCoprocessor-Parser-Twt_instance ...
- python中单例模式的创建
# 单例模式(使用装饰器) def singleton(cls): instance = {} def wrapper(*args,**kwargs): if cls not in instance: ...
- Java互联网架构师系统进阶课程学习 （4）【享学】
Java互联网架构师系统进阶课程学习 (4)[享学] 4.显式锁和AQS 显式锁 Lock接口和核心方法 Lock接口和synchronized的比较 synchronized 代码简洁,Lock ...
- JS的FileSaver在Chrome上保存失败
在使用JavaSript的FileSaver保存文件时,IE11上好的,chrome上反没响应,不能保存文件.寻找了半天,最好发现是因为在FileSaver之外还有一个自定义的全局URL变量,把这个U ...
- 在STM32F401上移植uC/OS的一个小问题 [原创]
STM32F401xx是意法半导体新推出的Cortex-M4内核的MCU,相较于已经非常流行的STM32F407xx和STM32F427xx等相同内核的MCU而言,其特点是功耗仅为128uA/MHz, ...
- zookeeper的集群搭建
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...
- Python -类型提示 Type Hints
为什么会有类型提示 Python是一种动态类型语言,这意味着我们在编写代码的时候更为自由,运行时不需要指定变量类型 但是与此同时 IDE 无法像静态类型语言那样分析代码,及时给我们相应的提示,比如字符 ...
- Shell-13-常用文件目录
linux系统目录结构 环境变量文件 系统级 系统级变量文件对所有用户生效 #系统范围内的环境变量和启动文件. #不建议把要做的事情写在这里面,最好创建一个自定义的,放在/etc/profile.d ...
- Dubbo系列讲解之服务注册【3万字长文分享】 23/100 发布文章
服务注册的几个步骤 对于RPC框架的服务注册,一般包含了如下的流程: 加载服务提供者,可能是通过xml配置的,也可能是通过扫描注解的 实例化服务提供者,并以服务接口作为key,实现类作为value ...
- MATLAB—命令窗、文件夹、路径、工作内存区、帮助系统
文章目录 一.命令窗操作 1.命令窗的显示 2.数据显示格式 3.命令行的标点符号 4.命令窗常用控制命令 5.指令行编辑 二.当前文件夹和路径设置 1.当前文件夹及其使用 2.搜索路径和路径设置 三 ...