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

ゞ浴缸里的玫瑰 2023-10-09 11:05 66阅读 0赞

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

浏览网页如下：

![1353628-20180728134816675-23323770.png][]

编辑效果

![1353628-20180728134938805-1125142016.png][]

转载于:https://www.cnblogs.com/Black-rainbow/p/9381806.html

[1353628-20180728134816675-23323770.png]: https://images2018.cnblogs.com/blog/1353628/201807/1353628-20180728134816675-23323770.png
[1353628-20180728134938805-1125142016.png]: https://images2018.cnblogs.com/blog/1353628/201807/1353628-20180728134938805-1125142016.png