首页 > 其他分享> > vue表格记录增删改查不成熟记录

vue表格记录增删改查不成熟记录

2022-03-02 23:01:56 作者：互联网

本篇是笔者自己练习的案例，其中可能存在很多新手错误

这是一个简单的表格形式的记录添加和删除实现。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script><!-- CDN形式引入Vue -->
    <style>
        a{
            font-size: 12px;
            color:rgb(0, 132, 255);
        }
        a:hover{
            font-size: 12px;
            text-decoration: underline;
        }
        .mTable{
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            width:100%;
            margin: 5px 0px;
        }
        .mTable tr{
            border-bottom: 1px solid #ccc;
            padding: 5px 0px;margin: 0px;
            background-color: aliceblue;
        }
        .mTable th{
            border-bottom: 1px solid #ccc;
            padding: 5px 0px;margin: 0px;
            background-color: rgb(79, 173, 255);
        }
        .mTable td{
            border-bottom: 1px solid #ccc;
            padding: 5px 0px;margin: 0px;
            background-color: aliceblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="姓名" v-model="newRec.name">
        <select v-model="newRec.sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <input type="number" placeholder="年龄" v-model="newRec.age">
        <button @click="add">新增</button>
        <table id="table" class="mTable" cellpading="0" cellspacing = 0 border="0">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="rec in recs" :key="rec.id">
                <td>{{rec.name}}</td>
                <td>{{rec.sex}}</td>
                <td>{{rec.age}}</td>
                <td><a @click="remove($event,rec.id)">删除</a></td>
            </tr>
        </table>
    </div>

    
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                recs:[
                    {id:"001",name:"张三",sex:"男",age:18},
                    {id:"002",name:"李四",sex:"女",age:28},
                    {id:"003",name:"王五",sex:"男",age:38},
                ],
                newRec:{
                    id:"",
                    name:"",
                    sex:"男",
                    age:null
                }
            },
            methods: {
                add(){
                    //动态创建id
                    this.newRec.id = "00" + this.recs.length + 1
                    //创建新纪录 newRec的副本
                    const nRec = {}
                    for (let key in this.newRec) {
                        nRec[key] = this.newRec[key]
                    }
                    //添加新纪录
                    this.recs.push(nRec)
                    //清空
                    this.newRec.id = ""
                    this.newRec.name = ""
                    this.newRec.sex = "男"
                    this.newRec.age = null
                },
                remove(e,key){
                    e.preventDefault();//阻止超链接的默认点击行为
                    let index;
                    for(let i=0;i<this.recs.length;i++){
                        if(this.recs[i].id == key){
                            index = i
                        }
                    }
                    this.recs.splice(index,1)
                }
            },
        })
    </script>
</body>
</html>

标签：vue,name,记录,改查,sex,1px,newRec,0px,id
来源： https://blog.csdn.net/graypigen1990/article/details/123241077