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

最新推荐文章于 2024-11-22 12:16:14 发布

baixishi8431

最新推荐文章于 2024-11-22 12:16:14 发布

阅读量269

点赞数

文章标签： javascript 运维 ViewUI

原文链接：http://www.cnblogs.com/Black-rainbow/p/9381806.html

版权

本文介绍如何使用Vue.js构建一个具备增加、删除和编辑功能的动态表格。通过具体的代码实例，展示了如何初始化表格数据，实现数据的动态更新，并提供了一个完整的HTML示例页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建一个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>

浏览网页如下：