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中,我们更应该专注 ...
随机推荐
- 剑指 Offer 40. 最小的k个数
剑指 Offer 40. 最小的k个数 输入整数数组 arr ,找出其中最小的 k 个数.例如,输入4.5.1.6.2.7.3.8这8个数字,则最小的4个数字是1.2.3.4. 示例 1: 输入:ar ...
- 通过cmake在Android中调用c语言，且三方应用通过so库调用c语言
1. 新建JniUtils类实现native方法 2. 在build中执行clean project 再rebuild project 生成class文件. 注意:最新版本的AndroidStud ...
- ECDSA高性能硬件实现——算法详解与模块划分
ECDSA全称椭圆曲线数字签名算法,它是基于素数域的椭圆曲线对信息进行加签与验签.其核心在于对信息的加签,及对加签的信息进行验签,那么下面介绍该算法流程. 假设Alice希望对消息m进行签名,并将消息 ...
- [C++]-set 集合
set集合用于存放一组无重复的元素.由于集合本身是有序的,所以可以高效地查找指定元素,也可以方便地得到指定大小范围地元素在容器中所处区间. 代码 #include<iostream> #i ...
- 嵌入式linux启动过程详解
启动第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬 ...
- MaterialDesign Or ComboBox 联动查询
<ComboBox Width="200" Height="30" x:Name="ComboxName" Text="{B ...
- 记客户端出现Connect reset问题排查。
客户访问我们地址出现Connect reset. 网上查询说是服务端关闭,客户端还在读,就会出现Connect reset. 我们就排查为什么服务端会关闭. 网络的同事说收到了客户端的信息,但是被服务 ...
- XXXMapper.xml中嵌套查询
XXXMapper.xml中嵌套查询 <resultMap id="LiveUserNocticeMap" type="com.fxkj.common.vo.Liv ...
- metasploit的数据库配置
metasploit所处位置:/usr/share/metasploit-framework msf数据库连接命令:db_connect msf:msfadmin@127.0.0.1/msf 1.启动 ...
- SpringBoot - 集成RocketMQ实现延迟消息队列
目录 前言 环境 具体实现 前言 RocketMQ是阿里巴巴在2012年开源的分布式消息中间件,记录下SpringBoot整合RocketMQ的方式,RocketMQ的安装可以查看:Windows下安 ...