新建一个html文件，内容如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>form</title>

    <script type="text/javascript" src="js/vue.min.js"></script>

    <style type="text/css">

        #table table {

            width: 100%;

            font-size: 14px;

            border: 1px solid #eee

        }

        #table {

            padding: 0 10px;

        }

        table thead th {

            background: #f5f5f5;

            padding: 10px;

            text-align: left;

        }

        table tbody td {

            padding: 10px;

            text-align: left;

            border-bottom: 1px solid #eee;

            border-right: 1px solid #eee;

        }

        table tbody td span {

            margin: 0 10px;

            cursor: pointer;

        }

        .delete {

            color: red;

        }

        .edit {

            color: #008cd5;

        }

        .add {

            border: 1px solid #eee;

            margin: 10px 0;

            padding: 15px;

        }

        input {

            border: 1px solid #ccc;

            padding: 5px;

            border-radius: 3px;

            margin-right: 15px;

        }

        button {

            background: #008cd5;

            border: 0;

            padding: 4px 15px;

            border-radius: 3px;

            color: #fff;

        }

        #mask {

            background: rgba(0, 0, 0, .5);

            width: 100%;

            height: 100%;

            position: fixed;

            z-index: 4;

            top: 0;

            left: 0;

        }

        .mask {

            width: 300px;

            height: 250px;

            background: rgba(255, 255, 255, 1);

            position: absolute;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            z-index: 47;

            border-radius: 5px;

        }

        .title {

            padding: 10px;

            border-bottom: 1px solid #eee;

        }

        .title span {

            float: right;

            cursor: pointer;

        }

        .content {

            padding: 10px;

        }

        .content input {

            width: 270px;

            margin-bottom: 15px;

        }

    </style>

</head>

<body>

<div id="table">

    <div class="add">

        <input type="text" v-model="addDetail.title" name="title" value="" placeholder="标题"/>

        <input type="text" v-model="addDetail.user" name="user" value="" placeholder="发布人"/>

        <input type="date" v-model="addDetail.dates" name="date" value="" placeholder="发布时间"/>

        <button @click="adddetail">新增</button>

    </div>

    <table cellpadding="0" cellspacing="0">

        <thead>

        <tr>

            <th>序号</th>

            <th>标题</th>

            <th>发布人</th>

            <th>发布时间</th>

            <th>操作</th>

        </tr>

        </thead>

        <tbody>

        <tr v-for="(item,index) in newsList">

            <td width="5%">{{index+1}}</td>

            <td>{{item.title}}</td>

            <td width="10%">{{item.user}}</td>

            <td width="15%">{{item.dates}}</td>

            <td width="10%"><span @click="deletelist(item.id,index)" class="delete">删除</span><span class="edit" @click="edit(item)">编辑</span>

            </td>

        </tr>

        </tbody>

    </table>

    <div id="mask" v-if="editlist">

        <div class="mask">

            <div class="title">

                编辑

                <span @click="editlist=false">x</span>

            </div>

            <div class="content">

                <input type="text" v-model="editDetail.title" name="title" value="" placeholder="标题"/>

                <input type="text" v-model="editDetail.user" name="user" value="" placeholder="发布人"/>

                <input type="date" v-model="editDetail.dates" name="date" value="" placeholder="发布时间"/>

                <button @click="update">更新</button>

                <button @click="editlist=false">取消</button>

            </div>

        </div>

    </div>

</div>

<script>

    var app = new Vue({

        el: '#table',

        data: {

            addDetail: {},

            editlist: false,

            editDetail: {},

            newsList: [{title: 'linux系统运维', user: '林冲', dates: '2018-02-19', id: "1111111111"},

                {title: 'python全栈开发', user: '宋江', dates: '2018-02-29', id: "22222222222"},

                {title: '流畅的python', user: '黉攟', dates: '2018-05-09', id: "11111112222"},

                {title: 'google运维之道', user: '王力宏', dates: '2018-09-09', id: "3333333333"},

                {title: '有趣的django', user: '与小白', dates: '2018-02-09', id: "23322445"}],

            editid: ''

        },

        mounted() {

        },

        methods: {

            //新增

            adddetail() {

                //这里的思路应该是把this.addDetail传给服务端，然后加载列表this.newsList

                //this.newsList.push(this.addDetail)

                this.newsList.push({

                    title: this.addDetail.title,

                    user: this.addDetail.user,

                    dates: this.addDetail.dates,

                })

                //axios.post('url',this.addDetail).then((res) =>{

                //若返回正确结果，清空新增输入框的数据

                //this.addDetail.title = ""

                //this.addDetail.user = ""

                //this.addDetail.dates = ""

                //})

            },

            //删除

            deletelist(id, i) {

                this.newsList.splice(i, 1);

                //这边可以传id给服务端进行删除  ID = id

                //axios.get('url',{ID:id}).then((res) =>{

                //			加载列表

                //})

            },

            //编辑

            edit(item) {

                this.editDetail = {

                    title: item.title,

                    user: item.user,

                    dates: item.dates,

                    id: item.id

                };

                this.editlist = true;

                this.editid = item.id

            },

            //确认更新

            update() {

                //编辑的话，也是传id去服务端

                //axios.get('url',{ID:id}).then((res) =>{

                //			加载列表

                //})

                let _this = this

                for (let i = 0; i < _this.newsList.length; i++) {

                    if (_this.newsList[i].id == this.editid) {

                        _this.newsList[i] = {

                            title: _this.editDetail.title,

                            user: _this.editDetail.user,

                            dates: _this.editDetail.dates,

                            id: this.editid

                        };

                        this.editlist = false

                    }

                }

            }

        }

    })

</script>

</body>

</html>

浏览网页如下：

编辑效果

vue.js动态表格增删改代码的更多相关文章

  1. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  2. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  3. Java对象转JSON时如何动态的增删改查属性

    1. 前言 日常开发中少不了JSON处理,少不了需要在JSON中添加额外字段或者删除特定字段的需求.今天我们就使用Jackson类库来实现这个功能. 2. JSON字符串增加额外字段 假如我们有这样结 ...

  4. js操作indexedDB增删改查示例

    js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var r ...

  5. asp.net下利用MVC模式实现Extjs表格增删改查

    在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...

  6. vue实现数据的增删改查

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

  7. vue+express+mongodb 实现 增删改查

    一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...

  8. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  9. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

随机推荐

  1. node-webkit-updater——NW.js自动更新

    NW.js自动更新三种方案: 1)node-webkit-updater(推荐) 2)nwjs-autoupdater 3)nw-autoupdater NW.js自动更新三种方案:[http://d ...

  2. VBA计算器的全部实现

    我们将加入 除零逻辑 和 对话框提示. 后面 就很简单了~~~ 提供效果图跟 代码 代码示例 Sub 矩形1_Click() ' ' 矩形1_Click Macro ' 代码编辑 Dim number ...

  3. Html5 Canvas斗地主游戏

    过完年来公司,没什么事,主管说研究下html5 游戏,然后主管就给了一个斗地主的demo,随后我就开始看代码, 现在我看了html5以及canvas相关知识和斗地主的demo后,自己用demo上的素材 ...

  4. maven项目的导包问题，已经加载jar包了可是idea检测不到

    1.详细请参考 https://blog.csdn.net/brainhang/article/details/76725080 把测试模式注释即可

  5. tensorflow2.0 numpy.ndarray 与tenor直接互转

    1.代码参考 import numpy as npimport tensorflow as tf a = np.random.random((5,3)) b = np.random.randint(0 ...

  6. kafka学习(六)

    用kafka构建数据管道   把kafka看着是一个数据的端点,怎么把kafka数据移到mysql,elasticSearchs 这里面介绍kafka connect API怎么样帮忙我们把数据移到我 ...

  7. 第十一周总结 继承、this和super的区别和用法、方法的重写和重载

    一.继承 1.子类继承父类,通过一个关键字 extends 2.子类的对象可以调用父类中的(public protected)属性和方法 当作自己的来使用 3.子类可以添加自己独有的属性和方法 4.子 ...

  8. Spring源码深度解析

    Spring源码分析 Spring Web入门及源码学习 [Spring源码分析]Bean加载流程概览 Spring Framework 实现原理与源码解析系统 Spring源码分析--水门 Spri ...

  9. javascript中的继承-寄生组合式继承

    前文说过,组合继承是javascript最常用的继承模式,不过,它也有自己的不足:组合继承无论在什么情况下,都会调用两次父类构造函数,一次是在创建子类原型的时候,另一次是在子类构造函数内部.子类最终会 ...

  10. Hibernate 日期映射 条件查询

    1. hql: ...and accopt_time > ?" 2. query.setDate Query query = session.createQuery(hql); int ...