用vue做简单的表格增删改查

哈咯啊大家，这周给大家分享一个用vue做简单的表格增删改查的方法。

以上就是效果图，那就开始我们今天的代码吧！

我们要做一个表格的话，首先就需要用table做表格，另外呢，我们还有新增查询和重置的按钮。修改的话我们就放在表格的操作里面。

 <div id="app">
        <button @click="openBtn()">新增</button>
        <input type="text" v-model="queryStr">
        <button @click="queryBtn()">查询</button>
        <button @click="resetBtn()">重置</button>
        <table width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
            <!-- <div v-if="">
                <tr v-for="(item,index) of datalist" :key="index+item">
            </div> -->
            <tr v-for="(item,index) of datalist" :key="index+item">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.schoolNum}}</td>
                <td>{{item.iphone}}</td>
                <td>
                    <button @click="updataBtn(item)">修改</button>
                    <button @click="del(item.schoolNum)">删除</button>
                </td>
            </tr>
        </table>

新增的话，我们就要另外有一个新增的表格。还得有个蒙版。

<!-- 新增页面 -->
        <div class="xzym" v-show="fal">
            <div class="xzymm">
                <h1 v-text="contexts"></h1>
                <label for="">姓名:</label>
                <input type="text" v-model="obj.name">
                <br>
                <label for="">学号:</label>
                <input type="text" v-model="obj.schoolNum">
                <br>
                <label for="">电话号码:</label>
                <input type="text" v-model="obj.iphone">
                <br>
                <button @click="addBtn()">确认</button>
                <button @click="clone()">取消</button>
            </div>
        </div>

这个是简单的样式设置。

<style>
        table,td{
            text-align: center;
        }
        .xzym {
            width:100%;
            height:500px;
            background-color:rgba(0,0,0,0.2);
            position:absolute;
            top:0;
        }
        .xzymm {
            width:500px;
            height:400px;
            background-color:white;
            margin:50px auto;
        }
    </style>

然后我们就要开始给表格做功能了。
温馨提示：我们是用vue做的表格哦，大家使用前别忘了要插入vue文件哦。不懂的代码有注释，大家可以找找相对应的功能哦！

<script>
     //清除提示
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                fal:false,
                // 新增修改切换的文字
                contexts:"",
                // 查询绑定值
                queryStr:"",
                obj:{
                    name:"",
                    schoolNum:"",
                    iphone:""
                },
                datalist:[],
                newDatas:[],
                schoolNums:"",
            }
        },
        methods: {
            // 新增\修改打开
            openBtn(){
                this.fal = true;
                this.contexts = "新增";
            },
            // 新增|修改提交
            addBtn(){
                if(this.contexts == "新增"){
                    this.datalist.push({
                        name:this.obj.name,
                        schoolNum:this.obj.schoolNum,
                        iphone:this.obj.iphone
                    })
                }else{
                    this.datalist.map((item,index)=>{
                        if(item.schoolNum==this.schoolNums){
                            this.datalist.splice(index,1,{
                                name:this.obj.name,
                                schoolNum:this.obj.schoolNum,
                                iphone:this.obj.iphone
                            })
                        }
                    })
                }
                this.clone();
            },
            // 取消
            clone(){
                this.fal = false;
                this.obj={
                    name:"",
                    schoolNum:"",
                    iphone:""
                }
            },
            // 删除事件
            del(user){
                // this.datalist.map((item,index)=>{
                //     if(item.schoolNum==user){
                //         this.datalist.splice(index,1);
                //     }
                // })
                this.datalist = this.datalist.filter((item)=> item.schoolNum !== user);
            },
            // 修改
            updataBtn(user){
                this.contexts = "修改";
                this.fal = true;
                this.schoolNums = user.schoolNum;
                this.obj={
                    name:user.name,
                    schoolNum:user.schoolNum,
                    iphone:user.iphone
                }
            },
            // 查询
            queryBtn(){
                this.newDatas = this.datalist;
                this.datalist = this.datalist.filter((item,index)=>{
                    return item.name==this.queryStr;
                })
            },
            // 重置
            resetBtn(){
                this.queryStr = "";
                this.datalist = this.newDatas;
            }
        },
    })
</script>

以上就是代码分解啦，具体代码在↓。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            text-align: center;
        }
        .xzym {
            width:100%;
            height:500px;
            background-color:rgba(0,0,0,0.2);
            position:absolute;
            top:0;
        }
        .xzymm {
            width:500px;
            height:400px;
            background-color:white;
            margin:50px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="openBtn()">新增</button>
        <input type="text" v-model="queryStr">
        <button @click="queryBtn()">查询</button>
        <button @click="resetBtn()">重置</button>
        <table width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
            <!-- <div v-if="">
                <tr v-for="(item,index) of datalist" :key="index+item">
            </div> -->
            <tr v-for="(item,index) of datalist" :key="index+item">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.schoolNum}}</td>
                <td>{{item.iphone}}</td>
                <td>
                    <button @click="updataBtn(item)">修改</button>
                    <button @click="del(item.schoolNum)">删除</button>
                </td>
            </tr>
        </table>
        <!-- 新增页面 -->
        <div class="xzym" v-show="fal">
            <div class="xzymm">
                <h1 v-text="contexts"></h1>
                <label for="">姓名:</label>
                <input type="text" v-model="obj.name">
                <br>
                <label for="">学号:</label>
                <input type="text" v-model="obj.schoolNum">
                <br>
                <label for="">电话号码:</label>
                <input type="text" v-model="obj.iphone">
                <br>
                <button @click="addBtn()">确认</button>
                <button @click="clone()">取消</button>
            </div>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                fal:false,
                // 新增修改切换的文字
                contexts:"",
                // 查询绑定值
                queryStr:"",
                obj:{
                    name:"",
                    schoolNum:"",
                    iphone:""
                },
                datalist:[],
                newDatas:[],
                schoolNums:"",
            }
        },
        methods: {
            // 新增\修改打开
            openBtn(){
                this.fal = true;
                this.contexts = "新增";
            },
            // 新增|修改提交
            addBtn(){
                if(this.contexts == "新增"){
                    this.datalist.push({
                        name:this.obj.name,
                        schoolNum:this.obj.schoolNum,
                        iphone:this.obj.iphone
                    })
                }else{
                    this.datalist.map((item,index)=>{
                        if(item.schoolNum==this.schoolNums){
                            this.datalist.splice(index,1,{
                                name:this.obj.name,
                                schoolNum:this.obj.schoolNum,
                                iphone:this.obj.iphone
                            })
                        }
                    })
                }
                this.clone();
            },
            // 取消
            clone(){
                this.fal = false;
                this.obj={
                    name:"",
                    schoolNum:"",
                    iphone:""
                }
            },
            // 删除事件
            del(user){
                // this.datalist.map((item,index)=>{
                //     if(item.schoolNum==user){
                //         this.datalist.splice(index,1);
                //     }
                // })
                this.datalist = this.datalist.filter((item)=> item.schoolNum !== user);
            },
            // 修改
            updataBtn(user){
                this.contexts = "修改";
                this.fal = true;
                this.schoolNums = user.schoolNum;
                this.obj={
                    name:user.name,
                    schoolNum:user.schoolNum,
                    iphone:user.iphone
                }
            },
            // 查询
            queryBtn(){
                this.newDatas = this.datalist;
                this.datalist = this.datalist.filter((item,index)=>{
                    return item.name==this.queryStr;
                })
            },
            // 重置
            resetBtn(){
                this.queryStr = "";
                this.datalist = this.newDatas;
            }
        },
    })
</script>
</html>

那宝贝们我们下期再见！