<!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基本增删改查的更多相关文章

  1. ABP+NetCore+Vue.js实现增删改查

    ABP我就不多介绍了,不知道的可以自己百度 本篇开发工具VS2017,数据库SQL SERVER2012,系统Win7 1.去ABP官网下载对应的模板,下载地址:https://aspnetboile ...

  2. 一起学Vue：CRUD(增删改查)

    目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...

  3. Vue表格数据增删改查及搜索

    <div id="app"> <div class="item"> <span class="name"> ...

  4. Vue.js——3.增删改查

    vue  写假后台  bootstrap 做的样式 代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  5. vue实现增删改查（内附源代码）

    VUE+Element实现增删改查 @ 目录 VUE+Element实现增删改查 前言 实验步骤 总结: 源代码 前言 &最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删 ...

  6. webpack4+express+mongodb+vue 实现增删改查

    在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...

  7. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  8. JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  9. vue实现对表格数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

随机推荐

  1. DASCTF七月赛两道Web题复现

    Ezfileinclude(目录穿越) 拿到http://183.129.189.60:10012/image.php?t=1596121010&f=Z3F5LmpwZw== t是时间,可以利 ...

  2. python+pycharm+selenium+谷歌浏览器驱动 自动化环境部署（一）

    准备工作: 第一步:安装python.打开网址https://www.python.org/downloads/windows/     现在最新版本3.7,本人使用的是3.6. 第二步:安装pych ...

  3. 深入理解jvm-2Edition-Java内存区域

    1.运行时数据区域 Java虚拟机会将内存区域划分为几个区域,每个区域储存不同类型的数据或承担不同的功能. PC,堆-Java堆,栈-虚拟机栈.本地方法栈,方法区.直接内存. 当类被实例化或stati ...

  4. [C++]-map 映射

    map用来存储排序后的由键和值组成的项的集合.键必须唯一,不同的键可以对应同一个值,在map中键保持逻辑排序后的顺序(以键为标准). 代码 #include<iostream> #incl ...

  5. 实战爬取某网站图片-Python

    直接上代码 1 #!/usr/bin/python 2 # -*- coding: UTF-8 -*- 3 from bs4 import BeautifulSoup 4 import request ...

  6. Docker部署Mysql实践

    前言:由于Docker部署容器时,没有指定IP,当机器重启后,容器的IP会变化,所以在创建容器的时候,最好能固定IP:同时,在Ubuntu系统中,每次执行命令,都需要root权限,命令需要加sudo标 ...

  7. 进程信号的未决状态（pending status）

    这两天看了apue有关进程信号的部分,觉得未决状态这个词很是不一般,呵呵.一开始当我看到这个词,我不理解,什么意思呢,读了好几遍.不知道是书里面讲的晦涩难懂,还是脑子越来越不行了,就是没有搞明白.后来 ...

  8. MySQL-07-information_schema/show

    information_schema.tables视图 DESC information_schema.TABLES /** TABLE_SCHEMA ---->库名 TABLE_NAME -- ...

  9. Windows内核-7-(IRP)I/O请求包

    Windows内核-7-(IRP)I/O请求包 IRP(I/O Request Packet)就是一个进行I/O操作的请求包. IRP是一个结构体,谁分配谁就得释放,通常由执行体里的管理器,获取内核驱 ...

  10. ECDSA—模乘模块

    如果a,b属于GF(P),则有乘法运算a*b=r (mod p), 其中r满足0<r<p-1,即a*b除以p的余数.该操作成为模p乘法.本模块输入两个数,完成两个数的模乘运算. 信号名 方 ...