<!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. C# Get和Post请求接口类

    public class HttpHelper {/// <summary> /// Get请求 /// </summary> /// <param name=" ...

  2. 【LeetCode】424. 替换后的最长重复字符

    424. 替换后的最长重复字符 知识点:字符串,滑动窗口: 题目描述 给你一个仅由大写英文字母组成的字符串,你可以将任意位置上的字符替换成另外的字符,总共可最多替换 k 次.在执行上述操作后,找到包含 ...

  3. GIT·全局配置文件及项目配置文件

    阅文时长 | 0.03分钟 字数统计 | 48.8字符 主要内容 | 1.引言&背景 2.声明与参考资料 『GIT·全局配置文件及项目配置文件』 编写人 | SCscHero 编写时间 | 2 ...

  4. Groovy正则表达式复杂逻辑判断实例

    下面的两个pattern(p1和p2)分别代表了(A or B) and (C or D)和(A and B) or (C and D)的跨行匹配结果,当然还可以用正则表达式构建更复杂的pattern ...

  5. Python语言系列-03-文件操作和函数

    ## 深浅拷贝 #!/usr/bin/env python3 # author:Alnk(李成果) # 赋值运算 # 可变的数据类型:由于数据类型可变,修改数据会在原来的数据的基础上进行修改, # 可 ...

  6. Sqli-Labs less54-65

    less-54 从54关开始,就是提升巩固的关卡,并且开始慢慢偏向实际. 第54关就是对输入的次数做了限制,需要在十次之内获取信息,否则就会刷新表名列名等信息. 以下的步骤截图就直接从上帝视角截图说明 ...

  7. STM32—TIMx实现编码器四倍频

    文章目录 一.储备知识 二.TIMx的编码器模式介绍 1.计数边沿设置 2.选择极性和使能 3.使能 4.计数方向 三.代码部分 一.储备知识 通过STM32的定时器编码器接口模式对编码器进行四倍频, ...

  8. 【设计模式】装饰者模式（DecoratorMode0

    From: https://liudongdong1.github.io/ 装饰者模式(Decorator Pattern):动态地给一个对象增加一些额外的职责,增加对象功能来说,装饰模式比生成子类实 ...

  9. HttpURLconnection的介绍

    一,HttpURLconnection的介绍 在Android开发中网络请求是最常用的操作之一, Android SDK中对HTTP(超文本传输协议)也提供了很好的支持,这里包括两种接口: 1.标准J ...

  10. 将svn项目导出，再导入到其他工作空间

    方法一: 对于一致svn地址,本地没有的项目,直接eclipse中svn检出即可. 若本地有项目,但想导入到另一个工作空间(即拷贝一份,不想再从svn拉),则需要用export方法. 方法二(expo ...