<!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. JIT in MegEngine

    作者:王彪 | 旷视框架部异构计算组工程师 一.背景 什么是天元 旷视天元(MegEngine)是一个深度学习框架,它主要包含训练和推理两方面内容.训练侧一般使用 Python 搭建网络:而推理侧考虑 ...

  2. 文本生成器（AC自动机+dp）

    F. 文本生成器 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 原题来自:JSOI 2007 JSOI 交给队员 ZYX 一个任务,编 ...

  3. 三层交换机和VLAN

    目录 一.VLAN的概述及优势 二.VLAN的种类 三.静态VLAN的配置 四.Trunk介绍与配置 五.三层交换机转发原理 一.VLAN的概述及优势 分割广播域 物理分割 逻辑分割 VLAN的优势: ...

  4. 解决win10快速访问不能取消固定

    最近发现win10的快速访问不能取消固定,比如ftp和smb之类的都不能取消固定 最后百度了一下发现一个简易的方法: 在文件资源管理器地址栏输入:%APPDATA%\Microsoft\Windows ...

  5. 【笔记】F1 score

    F1 score 关于精准率和召回率 精准率和召回率可以很好的评价对于数据极度偏斜的二分类问题的算法,有个问题,毕竟是两个指标,有的时候这两个指标也会产生差异,对于不同的算法,精准率可能高一些,召回率 ...

  6. 【原创】深入分析Ubuntu本地提权漏洞CVE-2017-16995

    *本文首发阿里云先知安全技术社区,原文链接https://xz.aliyun.com/t/2212 前言: 2018年3月中旬,Twitter 用户 @Vitaly Nikolenko 发布消息,称 ...

  7. Sqli-Labs less17-19

    less-17 前置基础知识: UPDATEXML (XML_document, XPath_string, new_value); 第一个参数:XML_document是String格式,为XML文 ...

  8. Docker中安装了gitlab，忘记了管理员密码，进行管理员密码重置

    重置docker中gitlab中root账号的密码 一.进入Docker的gitlab容器中 1.查看所有容器 docker ps 2.进入gitlab容器中 docker exec -it gitl ...

  9. 分布式redis自增

    redis+springboot RedisUtil.java package com.meeno.chemical.common.redis; import java.util.Date; impo ...

  10. jquery validate 如何校验多个相同name

    在表单页中有如下代码 <form> <input name="zhai"/><!-- 三个相同name的input --> <input ...