用Vue实现表格的增删改

最新推荐文章于 2024-05-29 15:28:15 发布

yingying123450998

最新推荐文章于 2024-05-29 15:28:15 发布

阅读量3.7k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/chengxuyuanying/article/details/123544591

版权

大家使用下面的代码就可以直接运行出来实现表格的增删改哦!

比我们之前用原生js写的更加简单

<!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>
    <style>
        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        form {
            width: 500px;
            margin: 20px auto;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            display: flex;
            /* border: 1px solid black; */

        }
        .dialog {
            background-color: antiquewhite;
            width: 500px;
            height: 200px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 20px;
            display: none;
            

        }

        .dialog.active {
            display: block;
        }

        .dialog>span {
            position: absolute;
            top: 15px;
            right: 15px;
            cursor: pointer;
        }
        input{
            margin: 5px;
        }
    </style>
</head>

<body>
    <script src="../vue.js"></script>
    <div id="app">
        <form action="">
            <label for="">
                姓名: <input type="text" v-model="info.name">
            </label>
            <label for="">
                年龄: <input type="text" v-model="info.age">
            </label>
            <label for="">
                性别: <input type="text" v-model="info.sex">
            </label>
            <button type="button" @click="addfun()">添加</button>
        </form>
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <td>id</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in users" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                    <td>
                        <button @click="showfun(item.id)">编辑</button>
                        <button @click="delfun(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div :class="{dialog:true,active:isshow}">
             <span @click="cha">×</span>
             <form action="">
                <label for="">
                    ID: <input type="text" v-model="dia.id">
                 </label>
                 <label for="">
                    姓名: <input type="text" v-model="dia.name">
                 </label>
                 <label for="">
                    年龄: <input type="text" v-model="dia.age">
                 </label>
                 <label for="">
                    性别: <input type="text" v-model="dia.sex">
                 </label>
                 <button @click="queren" type="button">确认编辑</button>
             </form>
             
        </div>
    </div>
    <script>
        const users = [
            { id: 1, name: '机械代码莹', age: 18, sex: "女" },
            { id: 2, name: '努力的小莹', age: 18, sex: "女" },
            { id: 3, name: '小莹在努力', age: 13, sex: "女" },
            { id: 4, name: '敲代码的猴', age: 18, sex: "男" }

        ]
        var vm = new Vue({
            el: "#app",
            data: {
                users: users,
                info:{},
                dia:{},
                isshow:false
            },
            methods: {
                //   表格的删除
                delfun(id) {
                    this.users = this.users.filter(item => item.id !== id)
                },
                // 表格的添加
                addfun(){
                    // 先给他添加一个id属性
                  this.info.id =this.users[this.users.length -1].id+1;
                  this.users.push(this.info)
                },
                // 表格的修改
                 showfun(id){
                       const result= this.users.find(item=>item.id===id);
                       this.dia={...result}

                    // 当点击编辑按钮时讲所要提交的表单显示出来
                     this.isshow=true
                 },
                queren(){
                  //也就是把update中的内容再重新赋值回到this.users
                  let result = this.users.find(item=>item.id===this.dia.id)
                  result.name=this.dia.name
                  result.age=this.dia.age
                  result.sex=this.dia.sex
                this.isshow=false
                
                },
                //点击cha号时将要显示的东西隐藏起来

                cha(){
                    this.isshow=false
                }
            }
        })
    </script>
</body>

</html>

yingying123450998

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
用Vue实现表格的增删改

表格的删除 <script src="../vue.js"></script>  <div id="app"> <table border="1" cellspacing="0"> <thead> <tr border="0"> <td&g.
复制链接

扫一扫