新建一个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. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  2. if you wanna the rainbow, you have to deal with the rain.

    bulk. n. 大量 reluctant. adj. 不情愿的 terrorist. n. 恐怖分子 recognition. n. 认出 tout.v. 兜售 conceal.v. 隐藏 dras ...

  3. Chapter03 第一节 简单变量

    3.1 简单变量 定义一个变量后,系统根据变量类型的不同在内存的不同区域分配一个空间,将值复制到内存中,然后用户通过变量名访问这个空间. 3.1.1 变量名 变量名的命名规则: 只能使用字母.数字.下 ...

  4. css文件引用

    #i1l{ background-color: chartreuse; height: 40px; } #i2l{ background-color: olivedrab; height: 40px; ...

  5. 【Linux开发】V4L2驱动框架分析学习

    Author:CJOK Contact:cjok.liao#gmail.com SinaWeibo:@廖野cjok 1.概述 Video4Linux2是Linux内核中关于视频设备的内核驱动框架,为上 ...

  6. Docker中的Dockerfile命令详解FROM　RUN　COPY　ADD　ENTRYPOINT...

    Dockerfile指令 这些建议旨在帮助您创建高效且可维护的Dockerfile. FROM FROM指令的Dockerfile引用 尽可能使用当前的官方图像作为图像的基础.我们推荐Alpine图像 ...

  7. exosip2 build

    Build eXosip on Win 1. download exosip  http://savannah.nongnu.org/projects/exosip/ 2. download libc ...

  8. GUI程序原理分析

    1,Qt 是一套跨平台的程序设计库,这套程序设计库主要用于 GUI 方面的程序设计开发,所以本系列博文主要是利用C++介绍 GUI 程序设计技术: 2,命令行应用程序: 1,命令行应用程序的特点(Co ...

  9. Android 开发环境部署

    引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环 ...

  10. css渐变色兼容性写法

    background: -webkit-linear-gradient(left, #0f0f0f, #0c0c0c, #272727); /* Safari 5.1 - 6.0 */ backgro ...