新建一个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. appium输入和清除操作各方法对比(android)

    最近在写android app自动化测试时,发现输入和清除操作耗费时间比较长,下面我用了不同的方法进行输入和清除操作,对比下时间(选取测试的一组数据做分析),选出最佳方法. 1.输入操作 1.1.we ...

  2. cocos2dx基础篇(15) 列表视图CCTableView

    [3.x] (1)去掉 "CC" (2)TableViewCell 中: > unsigned int getIdx() 返回类型改为 ssize_t(类型为 long) ( ...

  3. cocos2dx基础篇(13) 编辑框之二CCEditBox

    [3.x] (1)去掉"CC" (2)设置虚拟键盘的编辑类型 > EditBoxInputMode 变为强枚举 EditBox::EditBoxInputMode // SI ...

  4. Kibana开启中文语言

    Kibana在6.7以后的版本,支持了多种语言.并且自带在安装包里. 开启方式: 找到Kibana配置文件所在:config/kibana.yml找到配置:i18n.locale: "en& ...

  5. C#方法名前的方括号

    1.序列化:[Serializable]public void 方法名(){...} 2.WebServices方法:[WebMethod]public void 方法名(){...} 3.Ajax( ...

  6. API接口设计

    1.场景描述 比如说我们要做一款APP,需要通过api接口给app提供数据.假设我们是做商城,比如我们卖书的.我们可以想象下这个APP大概有哪些内容: 1)首页:banner区域(可以是一些热门书籍的 ...

  7. MySQL数据库的特点和优势

    MySQL数据库的特点和优势: 1.MySQL性能卓越.服务稳定,很少出现异常宕机. 2.MySQL开放源代码且无版权制约,自主性及使用成本低. 3.MySQL历史悠久,用户使用活跃,遇到问题可以寻求 ...

  8. 正反向代理、负载均衡、Nginx配置实现

    一.正反向代理 1.前提 我们曾经使用翻墙软件,访问google:使用了代理软件时,需要在浏览器选项中配置代理的地址,我们仅仅有代理这个概念,并不清楚代理还有正向和反向之分. 2.正向代理(代替客户端 ...

  9. 网络流 ISAP算法

    网络流问题: 我自己理解,在流网络中,在不违背容量限制的条件下,解决各种从源点到汇点的问题. ISAP算法概念: 据说不会有卡ISAP时间的题目---时间复杂度O(E^2*V) 首先原理都是基于不断寻 ...

  10. [多校联考2019(Round 5 T2)]蓝精灵的请求(二分图染色+背包)

    [多校联考2019(Round 5)]蓝精灵的请求(二分图染色+背包) 题面 在山的那边海的那边住着 n 个蓝精灵,这 n 个蓝精灵之间有 m 对好友关系,现在蓝精灵们想要玩一个团队竞技游戏,需要分为 ...