用Vue实现表格的增删改

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

比我们之前用原生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>

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用Vue和Element UI可以非常方便地实现表格增删功能。 首先,我们需要在Vue中引入Element UI的Table组件,用于显示表格数据。可以通过在Vue组件中引入以下代码来实现: ```javascript <template> <el-table :data="tableData"> <!-- 表格列的定义 --> </el-table> </template> <script> import { Table } from 'element-ui'; export default { components: { 'el-table': Table }, data() { return { tableData: [] // 表格数据 }; } } </script> ``` 接下来,我们需要在data函数中定义tableData,用于存储表格的数据。可以通过向tableData数组中添加对象的方式来定义表格的行数据。例如: ```javascript data() { return { tableData: [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 25 }, { name: 'Charlie', age: 30 } ] }; } ``` 然后,我们可以使用Element UI提供的Button组件来实现新增、删除和编辑操作。例如: ```javascript <el-button @click="addRow">新增</el-button> <el-button @click="deleteRow">删除</el-button> <el-button @click="editRow">编辑</el-button> ``` 在Vue组件的methods中定义对应的方法来实现表格增删功能。例如: ```javascript methods: { // 新增一行数据 addRow() { this.tableData.push({ name: '', age: '' }); }, // 删除选中的行数据 deleteRow() { const selectedRows = this.$refs.table.selection; selectedRows.forEach(row => { const index = this.tableData.indexOf(row); this.tableData.splice(index, 1); }); }, // 编辑选中的行数据 editRow() { // 编辑操作 } } ``` 通过以上步骤,即可使用Vue和Element UI实现表格增删功能。根据具体需求,可以进一步自定义表格列的定义、编辑操作等功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值