<!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. Python中比较运算符连用的语法规则

    在Python中,比较运用符<.>.<=.>=.== .!=可以连用,但语法规则和其它编程语言不一样 以 == 为例,具体语法规则是: a == b == c == d 等价于 ...

  2. Nginx 解析漏洞

    目录 漏洞复现 漏洞成因 修复方案 参考链接 该漏洞与Nginx.php版本无关,属于用户配置不当造成的解析漏洞. 漏洞复现 访问http://172.17.0.1/uploadfiles/nginx ...

  3. XCTF-simple unpack

    题目提示这是一个加壳的二进制文件,拖到exeinfope,是UPX壳. 这里我们用linux命令upx -d脱壳. 脱完壳之后拉入ida64中分析.找到main函数,可以看到这一句可以是输出flag的 ...

  4. 使用 Service Worker 缓解网站 DDOS 攻击

    前言 传统的 DDOS 防御开销很大,而且有时效果并不好. 例如使用 DNS 切换故障 IP 的方案,由于域名会受到缓存等因素的影响通常有分钟级延时,前端难以快速生效.例如使用 CDN 服务,虽可抵挡 ...

  5. CYPEESS USB3.0程序解读之---SPI读写

    前面已经解读了GPIO以及同步FIFO操作,下面我们看一个SPI读写的例子,它是主程序命令从SPI中读写一些数据. SPI传输子程序看一下: 页地址,字节计数,缓冲区,读写标志 因为只能一页一页的读或 ...

  6. sqli-labs lesson1-4

    写在前面: 前四关基本都是基于GET的SQL注入 在Mysql中有一个系统数据库information_schema,存储着所有数据库的相关信息,一般利用这个数据库进行SQL注入. 因为大部分的注入需 ...

  7. Longhorn，企业级云原生容器分布式存储 - 支持 ReadWriteMany (RWX) 工作负载（实验性功能）

    内容来源于官方 Longhorn 1.1.2 英文技术手册. 系列 Longhorn 是什么? Longhorn 企业级云原生容器分布式存储解决方案设计架构和概念 Longhorn 企业级云原生容器分 ...

  8. C++进阶—>带你理解多字节编码与Unicode码

    参考网址:https://blog.csdn.net/u011028345/article/details/78516320 多字节字符与宽字节字符 char与wchar_t 我们知道C++基本数据类 ...

  9. C#根据输入的字符串来创建类的实例

    abstract class Vehicle { public abstract void Drive(); } class Car : Vehicle { public override void ...

  10. C++多态中虚函数表合并与继承问题

    多态: C++的多态是通过一张虚函数表(Virtual Table)来实现的,简称为 V-Table.在这个表中,主要是一个类的虚函数的地址表,这张表解决了继承.覆写的问题,保证其真实反应实际的函数. ...