<!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. IDEA使用Tomcat时控制台乱码的解决方案>从零开始学JAVA系列

    IDEA使用Tomcat时控制台乱码的解决方案 解决方案1,修改启动时虚拟机参数 解决方案2,修改idea的设置 解决方案3,修改idea配置文件 在最后添加一行 '-Dfile.encoding=U ...

  2. 深度学习算子优化-FFT

    作者:严健文 | 旷视 MegEngine 架构师 背景 在数字信号和数字图像领域, 对频域的研究是一个重要分支. 我们日常"加工"的图像都是像素级,被称为是图像的空域数据.空域数 ...

  3. 从net到java：java快速入门

    学习java那是不可能的,到为什么不学习一下呢.仅为总结.希望自己在不久的将来能书写优美的java程序.加油!奥利给 1.注释 注释的重要性不言而喻,我们不管写什么代码注释必不可少,那么java的注释 ...

  4. HCIA-物理层

    OSI七层模型 应-->表-->会-->传-->网-->数-->物理层 TCP/IP四层模型 两个主导协议 -->工业标准 应-->传-->网-- ...

  5. C++ 结构体案例2 升序打印数组中的元素

    1 //结构体案例 2 2 #include<iostream> 3 #include<string> 4 #include<ctime> 5 using name ...

  6. openstack June all-in-one 安装手册

    by lt,hyc 1.安全规范 表1:openstack用户和密码值设置 用户名 含义  本文的设置值 Admin openstack管理员用户 ADMIN_PASS Keystone openst ...

  7. spring-security oauth2.0简单集成

    github地址:https://github.com/intfish123/oauth.git 需要2个服务,一个认证授权服务,一个资源服务 认证授权服务为客户端颁发令牌,资源服务用于客户端获取用户 ...

  8. 嵌入式Linux可用的防火墙——iptables：实现ip白名单、mac地址白名单

    iptables是linux系统下的一个功能强大的模块,不仅可以用作防火墙,还可以实现NAT等众多路由功能.iptables的容器有很清晰的层次关系: 1. iptables是表的容器,iptable ...

  9. Windows安装Svn客户端

    一.下载程序 官网地址,选择最新64位下载. 下载完成 二.安装过程 点击下一步 点击下一步 选择安装目录 点击安装 安装完成 三.修改中文 下载中文包 下载完成 点击下一步 安装完成 点击设置 选择 ...

  10. wait notify的使用

    1.wait().notify/notifyAll() 方法是Object的本地final方法,无法被重写. 2.wait()使当前线程阻塞,前提是 必须先获得锁,一般配合synchronized 关 ...