vue.js动态表格增删改代码

新建一个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动态表格增删改代码的更多相关文章

javascript生成表格增删改查 JavaScript动态改变表格单元格内容动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
vue实战(一):利用vue与ajax实现增删改查
vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...
Java对象转JSON时如何动态的增删改查属性
1. 前言日常开发中少不了JSON处理,少不了需要在JSON中添加额外字段或者删除特定字段的需求.今天我们就使用Jackson类库来实现这个功能. 2. JSON字符串增加额外字段假如我们有这样结 ...
js操作indexedDB增删改查示例
js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var r ...
asp.net下利用MVC模式实现Extjs表格增删改查
在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...
vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
vue+express+mongodb 实现增删改查
一.创建一个vue项目用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...
基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

随机推荐

Debian系列Linux的隐藏WiFi
Debian系列Linux共用相同的deb安装包,拥有大量的各种软件,是Linux里面最主要的生态系.包括Ubuntu及其衍生版本如Lubuntu/Mate/Kubuntu等,在ARM上也有很好的支持 ...
安装docker-下载加速、失败、成功安装
前提:已装VMware虚拟机和Centos系统(具体安装包和过程可以百度) 先看这里:非root身份登录系统需要在下面的命令前加“sudo ”(sudo:代表给权限,用root登录则不需要输入) 一. ...
python string_3 end 内建函数详解
以下方法,是在python2上运行的,编码也使用的是python2, 在对比python3后,发现,基本相同,也就是说在print后补上(),使用函数方式,是可以在python3下运行的, 删除了针对 ...
应用安全 - 工具 | 数据库 - redis - 漏洞 - 汇总
未授权访问 Date 类型未授权访问导致getshell 影响范围复现 (1)shell反弹 (2)结合SSH服务 (3)结合web服务分析
Golang基本类型整理
总是用的用的就模糊了,不知道基本的类型有哪些,看来要反反复复弄几次. Golang基本类型整理基本类型以及定义变量需要注意的对于基本类型的介绍,感觉这个博客讲的比较透彻,基本上都是从源码的角度来入 ...
<<用法
数据移位运算符,左移几位,如:x=i<<4;就是将i的值左移4位(放大2的4次方)后,赋给x,若i=2,则X=32.
Java IO NIO详细讲解
1.IO Java IO概述 2.NIO Java NIO浅析
打印 PRINT
打印 PRINT 字符串和数值类型可以直接输出. print(1) #out:1 print('a') #out:a 变量无论什么类型,数值,字符串,列表,字典...都可以直接输出 n = 1 s ...
DateHandler日期处理工具(JSP中使用后台工具类)
1.DateHandler.java package Utils.dateHandler; import java.text.ParseException; import java.text.Simp ...
安装配置php及fastadmin
FastAdmin教程之准备运行环境一.Node.js http://nodejs.cn/download/ https://npm.taobao.org/mirrors/node/v8.4.0 ...

vue.js动态表格增删改代码

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

随机推荐

热门专题