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中,我们更应该专注 ...
随机推荐
- template.js模板工具案例
案例一 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&qu ...
- Android：Android Studio导入OpenCV（Android项目）
在使用OpenCV之前,Android必须先下载ndk,因为OpenCV使用了native代码,这里建议Android Studio创建C++项目来写OpenCV的内容 1.首先在官网下载OpenCV ...
- 040_Spring注解开发
目录 Spring注解开发 bean注册到Spring容器中 applicationContext.xml添加包扫描注解 实体类添加注解@Component 属性注入 属性添加注解@Value(&qu ...
- SWAP的罪与罚&&NUMA的取舍
说个案例:一台Apache服务器,由于其MaxClients参数设置过大,并且恰好又碰到访问量激增,结果内存被耗光,从而引发SWAP,进而负载攀升,最终导致宕机. 正所谓:SWAP,性能之大事,死生之 ...
- Golang语言系列-03-流程控制语句
Go语言流程控制语句 Go语言中最常用的流程控制语句有 if 和 for ,没有像Python中的while语句.另外,Go语言还有switch和goto语句,不过这两个主要是用来简化代码的,属于扩展 ...
- css内容渐入效果实现
.fade-in-section { opacity: 0; transform: translateY(20vh); visibility: hidden; transition: opacity ...
- open62541(opcua)传输延迟探索小记
缘起 将open62541作为中间件使用代替自定义数据的RPC,client通过订阅valueChange来接收数据.使用时发现有一些问题: 前后两次产生的数据相同时,不会触发valueChange ...
- ASP.NET Core：ASP.NET Core程序使用Docker部署
一.前言 这篇文章介绍如何将一个ASP.NET Core应用程序在Docker中进行部署.开发工具使用的是Visual Studio 2019和VS Code. 二.使用Docker部署 我们选择新建 ...
- promise对象调试
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- qt 中的自定义pushbutton