Vue crud-增删改查带分页操作

最新推荐文章于 2023-04-16 09:29:32 发布
ℳ๓唯一ℳ
最新推荐文章于 2023-04-16 09:29:32 发布
阅读量516
点赞数
分类专栏： Web前端
本文链接：https://blog.csdn.net/qq_43707633/article/details/108407096
版权
Web前端专栏收录该内容
9 篇文章 1 订阅
订阅专栏
展示页面
在这里插入图片描述 代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="node_modules/bootstrap/css/bootstrap.css"/>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <style>
        table thead tr th {
            text-align:center;
        }
    </style>
</head>
<body>
    <div style="padding:20px;" id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">用户管理</div>
            <table class="table table-bordered table-striped text-center">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>年龄</th>
                        <th>毕业学校</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="(row, index) in rows">
                        <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
                            <td>{{row.Name}}</td>
                            <td>{{row.Age}}</td>
                            <td>{{row.School}}</td>
                            <td>{{row.Remark}}</td>
                            <td><a href="#" @click="Edit(row)">编辑</a>&nbsp;&nbsp;<a href="#" @click="Delete(row.Id)">删除</a></td>
                        </tr>
                    </template>
                    <!-- 编辑input文本框 -->
                    <tr>
                        <td><input type="text" class="form-control" v-model="rowtemplate.Name"/></td>
                        <td><input type="text" class="form-control" v-model="rowtemplate.Age"/></td>
                        <td><select class="form-control" v-model="rowtemplate.School">
   　　　　　　　　　　　　　　　　 <option>美国加里敦大学</option>
    　　　　　　　　　　　　　　　　<option>美国菲林浩斯大学</option>
    　　　　　　　　　　　　　　　　<option>河北工程大学</option>
                                 <option>北京清华北大</option>
　　　　　　　　　　　　　　　　</select></td>
                        <td><input type="text" class="form-control" v-model="rowtemplate.Remark"/></td>
                        <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <nav style="float:right;">
            <ul class="pagination pagination-lg">
                <template v-for="page in Math.ceil(rows.length/pagesize)">
                    <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
                    <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                    <li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
                    <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#">下一页</a></li>
                </template>
            </ul>
        </nav>
    </div>
    <!-- <script src="node_modules/jquery/dist/jquery.min.js"></script> -->
    <script>
        //Model数据模型
        var data = {
            rows: [
                {Id: 1, Name: '张浩', Age: 20, School: '美国加里敦大学', Remark: '三好学生'},
                {Id: 2, Name: '张杰', Age: 18, School: '美国菲林浩斯大学', Remark: '三好学生'},
                {Id: 3, Name: '武赛杰', Age: 23, School: '河北工程大学', Remark: '不老实的家伙'},
                {Id: 4, Name: '妞妞', Age: 28, School: '北京清华北大', Remark: '我要跟你一起'},
                {Id: 5, Name: '钞哥', Age: 22, School: '美国加里敦大学', Remark: '三好学生'},
                {Id: 1, Name: '杨过', Age: 20, School: '美国菲林浩斯大', Remark: '三好学生'},
                {Id: 2, Name: '小龙女', Age: 18, School: '美国加里敦大学', Remark: '三好学生'},
                {Id: 3, Name: '欧阳锋', Age: 23, School: '河北工程大学', Remark: '不老实的家伙'},
                {Id: 4, Name: '郭靖', Age: 28, School: '美国菲林浩斯大', Remark: '我要跟你一起'},
                {Id: 5, Name: '黄蓉', Age: 22, School: '河北工程大学', Remark: '三好学生'},
            ],
            pagesize: 4,
            curpage:1,//当前页的页码
            rowtemplate: {Id: 0,Name: '',Age: '',School: '',Remark: ''}
        };
        //ViewModel,创建Vue实例
        var vue = new Vue({
            //挂载
            el: '#app',
            data: data,
            methods: {
                //上一页方法
                PrePage: function (event) {
                    $(".pagination .active").prev().trigger("click");
                },
                //下一页方法
                NextPage: function (event) {
                    $(".pagination .active").next().trigger("click");
                },
                //点击页码的方法
                NumPage: function (num, event) {
                    if(this.curpage == num){
                        return;
                    }
                    this.curpage = num;
                    $(".pagination li").removeClass("active");
                    if(event.target.tagName.toUpperCase() == "LI") {
                        $(event.target).addClass("active");
                    }else {
                        $(event.target).parent().addClass("active");
                    }
                    if(this.curpage == 1) {
                        $("#prepage").addClass("disabled");
                    }else {
                        $("#prepage").removeClass("disabled");
                    }
                    if(this.curpage == Math.ceil(this.rows.length / this.pagesize)){
                        $("#nextpage").addClass("disabled");
                    }else {
                        $("#nextpage").removeClass("disabled");
                    }
                },
                //删除方法
                Delete: function(id){
                    //实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理
                    for(var i=0;i<this.rows.length;i++){
                        if(this.rows[i].Id == id) {
                            this.rows.splice(i,1);
                            break;
                        }
                    }
                },
                //编辑
                Edit: function (row){
                    this.rowtemplate = row;
                },
                //添加
                Save : function (event){
                    if(this.rowtemplate.Id == 0){
                        //设置当前新增行的Id
                        this.rowtemplate.Id = this.rows.length +1;
                        //放值添加
                        this.rows.push(this.rowtemplate);
                    }
                    //还原模板
                    this.rowtemplate = {Id: 0,Name: '',Age: '',School: '',Remark: ''}
                }
            }
        });
    </script>
</body>
</html>