运用vue写增删改查的表格

大纲：

首先：

1.写入HTML中的一些块级元素，行内元素，行内块元素

2.给表格添加简易样式

3.导入vue文件

4.创建实例，以及函数

一.创建一个简易表格

 <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>

二.给表格添加简易样式

 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;
        }

三.导入vue文件

注意：一定不要忘记添加文件，很多人都会忘记引入文件

<script src="./vue文件/vue.js"></script>

四.创建实例，写入函数，添加功能

1.创建实例绑定容器

 Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                fal:false,
                // 新增修改切换的文字
                contexts:"",
                // 查询绑定值
                queryStr:"",
                obj:{
                    name:"",
                    schoolNum:"",
                    iphone:""
                },
                datalist:[],
                newDatas:[],
                schoolNums:"",
            }
        },

2.写入函数

 methods: {
          
        },

3.添加功能

        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;
            }
        },

最后：效果图如下