vue表格+vue分页+搜索

分页样式

.pageination_align {
            text-align: center
        }
        .pageination {
            color: #48576a;
            font-size: 12px;
            display: inline-block;
            user-select: none;
        }
        .pagination_page {
            padding: 0 4px;
            border: 1px solid #d1dbe5;
            border-right: 0;
            background: #fff;
            font-size: 13px;
            min-width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            float: left;
        }
        .pagination_page_right {
            border-right: 1px solid #d1dbe5;
        }
        .pagination_page:hover {
            color: #20a0ff;
        }
        .disabled {
            color: #e4e4e4 !important;
            background-color: #fff;
            cursor: not-allowed;
        }
        .pagination_page_active {
            border-color: #20a0ff;
            background-color: #20a0ff;
            color: #fff !important;
            ;
            cursor: default;
        }

表格样式

   /* Table Styles */
        .state0 {
            color: #f70f0f;
        }
        .state1 {
            color: #00c38d;
        }
        .state2 {
            color: #fcfcfc;
        }
        .state3 {
            color: #fcfcfc;
        }
        .table-wrapper {
            margin: 10px 70px 70px;
            box-shadow: 0px 35px 50px rgba(0, 0, 0, 0.2);
        }
        .fl-table {
            border-radius: 5px;
            font-size: 12px;
            font-weight: normal;
            border: none;
            border-collapse: collapse;
            width: 100%;
            max-width: 100%;
            white-space: nowrap;
            background-color: white;
        }
        .fl-table td, .fl-table th {
            text-align: center;
            padding: 8px;
        }
        .fl-table td {
            border-right: 1px solid #f8f8f8;
            font-size: 12px;
        }
        .fl-table-black thead th {
            color: #ffffff;
            background: #324960;
        }
        .fl-table-green thead th {
            color: #ffffff;
            background: #4FC3A1;
        }
        .fl-table tr:nth-child(even) {
            background: #F8F8F8;
        }
        .fl-table tbody td img {
            width: 100px;
            text-align: center;
        }
        a {
            -webkit-tap-highlight-color:rgba(255, 0, 0, 0)
        }
        .fl-table a {
            text-decoration:none;
            background:0 0;
            width: 50px;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        /*.fl-table thead th {*/
        /*    color: #ffffff;*/
        /*    background: #4FC3A1;*/
        /*}*/
        /*.fl-table thead th:nth-child(odd) {*/
        /*    color: #ffffff;*/
        /*    background: #324960;*/
        /*}*/
        /* Responsive */
        @media (max-width: 767px) {
            .fl-table {
                display: block;
                width: 100%;
            }
            .table-wrapper:before {
                content:"Scroll horizontally >";
                display: block;
                text-align: right;
                font-size: 11px;
                color: white;
                padding: 0 0 10px;
            }
            .fl-table thead, .fl-table tbody, .fl-table thead th {
                display: block;
            }
            .fl-table thead th:last-child {
                border-bottom: none;
            }
            .fl-table thead {
                float: left;
            }
            .fl-table tbody {
                width: auto;
                position: relative;
                overflow-x: auto;
            }
            .fl-table td, .fl-table th {
                padding: 20px .625em .625em .625em;
                height: 60px;
                vertical-align: middle;
                box-sizing: border-box;
                overflow-x: hidden;
                overflow-y: auto;
                width: 120px;
                font-size: 13px;
                text-overflow: ellipsis;
            }
            .fl-table thead th {
                text-align: left;
                border-bottom: 1px solid #f7f7f9;
            }
            .fl-table tbody tr {
                display: table-cell;
            }
            .fl-table tbody tr:nth-child(odd) {
                background: none;
            }
            .fl-table tr:nth-child(even) {
                background: transparent;
            }
            .fl-table tr td:nth-child(odd) {
                background: #F8F8F8;
                border-right: 1px solid #E6E4E4;
            }
            .fl-table tr td:nth-child(even) {
                border-right: 1px solid #E6E4E4;
            }
            .fl-table tbody td {
                display: block;
                text-align: center;
            }
        }

分页js

 var pageination='<script type="text/x-template" id="pageination">\n' +
    '    <div class="pageination_align">\n' +
    '        <div class="pageination" v-if="pageinationTotal">\n' +
    '            <div @click="pageUp(0)" class="pagination_page" :class="startDisabled?\'disabled\':\'\'">首页</div>\n' +
    '            <div @click="pageUp(1)" class="pagination_page" :class="startDisabled?\'disabled\':\'\'">上一页</div>\n' +
    '            <div class="pagination_page" :class="item==pageinationCurrentPage?\'pagination_page_active\':\'\'"\n' +
    '                 v-for="item in pageinationLength" @click="jump(item)">\n' +
    '                {{item}}\n' +
    '            </div>\n' +
    '            <div @click="pageDown(1)" class="pagination_page" :class="endDisabled?\'disabled\':\'\'">下一页</div>\n' +
    '            <div @click="pageDown(0)" class="pagination_page pagination_page_right" :class="endDisabled?\'disabled\':\'\'">\n' +
    '                尾页\n' +
    '            </div>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '</script>'
  console.log(pageination);   
  
  
var dom = document.querySelector("body");
dom.innerHTML += pageination;
Vue.component('pageination', {
    props: ['total', 'size', 'page', 'changge', 'isUrl'],
    template: '#pageination',
    data() {
        return {
            pageinationTotal: this.total,//总条目数
            pageinationSize: this.size ? this.size : 10,//每页显示条目个数
            pageinationLength: [],
            pageinationCurrentPage: this.page ? this.page : 1,//当前页数默认1
            pageinationPage: 0,//可分页数
            startDisabled: true,//是否可以点击首页上一页
            endDisabled: true,//是否可以点击尾页下一页
            pageChangge: this.changge,//修改方法
            pageIsUrl: this.isUrl ? true : false,//是否开启修改url
        }
    },
    methods: {
        jump(item) {
            this.pageinationCurrentPage = item;
            this.pagers();
            this.pageChangge(this.pageinationCurrentPage);
        },//跳转页码
        pagers() {
            //可分页数
            this.pageinationPage = Math.ceil(this.pageinationTotal / this.pageinationSize);
            //url修改
            if (this.pageIsUrl) {
                this.$router.replace({
                    path: this.$route.path,
                    query: {
                        page: this.pageinationCurrentPage,
                    }
                });
            }
            //是否可以点击上一页首页
            this.startDisabled = this.pageinationCurrentPage != 1 ? false : true;
            //是否可以点击下一页尾页

            this.endDisabled = this.pageinationCurrentPage != this.pageinationPage ? false : true;
            if (this.pageinationPage == 0) this.endDisabled = true;
            //重置
            this.pageinationLength = [];
            //开始页码1
            let start = this.pageinationCurrentPage - 4 > 1 ? this.pageinationCurrentPage - 4 : 1;
            //当前页码减去开始页码得到差
            let interval = this.pageinationCurrentPage - start;
            //最多9个页码，总页码减去interval 得到end要显示的数量+
            let end = (9 - interval) < this.pageinationPage ? (9 - interval) : this.pageinationPage;
            //最末页码减开始页码小于8
            if ((end - start) != 8) {
                //最末页码加上与不足9页的数量，数量不得大于总页数
                end = end + (8 - (end - start)) < this.pageinationPage ? end + (8 - (end - start)) : this.pageinationPage;
                //最末页码加上但是还不够9页，进行开始页码追加，开始页码不得小于1
                if ((end - start) != 8) {
                    start = (end - 8) > 1 ? (end - 8) : 1;
                }
            }
            for (let i = start; i <= end; i++) {
                this.pageinationLength.push(i);
            }
        },//计算分页显示的数字
        pageUp(state) {
            if (this.startDisabled) return;
            if (this.pageinationCurrentPage - 1 != 0 && state == 1) {
                this.jump(this.pageinationCurrentPage - 1);
            } else {
                this.jump(1);
            }
        },//上一页跟首页 state=1是上一页 state=0是首页
        pageDown(state) {
            if (this.endDisabled) return;
            if (this.pageinationCurrentPage + 1 != this.pageinationPage && state == 1) {
                this.jump(this.pageinationCurrentPage + 1);
            } else {
                this.jump(this.pageinationPage);
            }
        },// state=1是下一页 state=0是尾页
        pageCurrentChange() {
            this.pageChangge(this.pageinationCurrentPage);
            this.pagers();
        }
    },
    created() {
        this.pageCurrentChange();
    },
    watch: {
        total: function (val, oldVal) {
            this.pageinationTotal = val;
            this.pagers();
        },
        page: function (val, oldVal) {
            this.pageinationCurrentPage = val;
            this.pagers();
        }
    }
})

页面

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>  
     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> 
</style>
    </head>
    
    <body>
        <div class="table-wrapper" id="app">
           
            <table class="fl-table fl-table-black">
                <thead>
                    <tr>
                        <th v-for="(value, key, index) in thead"> <span v-if="value.type=='checkbox'"><input type="checkbox"  @click="changeAllChecked()" > </span>
 <span v-else> {{value.tetle}} </span> 
                        </th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(list_data_value, list_data_key, list_data_index) in list_data">
                        <td v-for="(value, key, index) in thead">
                            <div v-for="(list_data_valuevalue, list_data_valuekey, list_data_valueindex) in list_data_value" v-if="list_data_valuekey == value.name "> <span v-if="value.type=='checkbox' ">  <input type="checkbox"  v-model="checkedNames"     :value="list_data_valuevalue">{{list_data_valuevalue}} </span>
 <span v-else-if="value.type=='img' ">   	<img :src = "list_data_valuevalue"/> </span>
 <span v-else-if="value.type=='hert' ">   <a :href="list_data_valuevalue">{{list_data_valuevalue}}</a> </span>

                                <span
                                v-else-if="value.type=='state' " :class="'state'+list_data_valuevalue">{{value.searchList[list_data_valuevalue]}}</a>
                                    </span> <span v-else> {{list_data_valuevalue}} </span> 
                            </div>
                        </td>
                        <td> <span @click="del(list_data_value.id)">删除</span>

                        </td>
                    </tr>
                    <tbody>
            </table>
            <pageination :total="model.total" :size="model.size" :page="model.page" :changge="pageFn"></pageination>
        </div>
        
        <link rel="stylesheet" type="text/css" href="./table/table.css" />
        <script src="./table/table.js"></script>
        <link rel="stylesheet" type="text/css" href="./page/pageination.css" />
        <script src="./page/pageination.js"></script>
        <script src="./j.js"></script>
 
        <script>
        var app = new Vue({
            el: '#app',
            data: {
                
                pk: 'id',
                index_url: './q.php',
                add_url: 'article/add',
                edit_url: 'article/edit',
                del_url: 'article/del',
                multi_url: 'article/multi',

                search: {
                    fname: '',
                    lname: '',


                },
                thead: [
                    {
                        name: 'id',
                        tetle: "name",
                        type: "checkbox"
                    },
                    {
                        name: 'tetle',
                        tetle: "tetle",
                        type: "a"
                    },
                    {
                        name: 'hert',
                        tetle: "hert",
                        type: "hert"
                    },
                    {
                        name: 'img',
                        tetle: "img",
                        type: "img"
                    },
                    {
                        name: 'img',
                        tetle: "img",
                        type: "imgs"
                    },
                    {
                        name: 'img',
                        tetle: "img",
                        type: "Headportrait"
                    },
                    {
                        name: 'img',
                        tetle: "img",
                        type: "switch"
                    }, 
                    {
                        name: 'img',
                        tetle: "img",
                        type: "label"
                    },
                    {
                        name: 'state',
                        tetle: "state",
                        type: "state",
                        searchList: {
                            "1": "显示",
                            "0": "隐藏"
                        }
                    }
                ],
                checked: false,
                checkedNames: [],
                model: {
                    total: 300, //总页数
                    size: 10, //每页显示条目个数不传默认10
                    page: 1, //当前页码
                },
                list_data: null
            },
            watch: {　　
                checkedNames() {　　　　
                    if (this.checkedNames.length == this.list_data.length) {　　　　　　
                        this.checked = true;　　　　
                    } else {　　　　　　
                        this.checked = false;　　　　
                    }　　
                }
            },
            methods: {
                //页码切换执行方法
                pageFn(val) {
                    this.model.page = val;
                    //  alert(val);
                     this.post();
                    console.log(val);
                },
                post: function () {

                    var fname = this.search.fname;
                    //发送 post 请求
                    var index_url = this.index_url


                    this.$http.post(index_url, {
                        p: this.model.page,
                        where: this.search
                    }, {
                        emulateJSON: true
                    }).then(function (res) {
                        this.list_data = res.body.data

                        console.log(res);
                    }, function (res) {
                        console.log(res.status);
                    });
                    /* */
                },
                changeAllChecked: function () {
                    if (this.checked) {
                        this.checkedNames = [];
                    } else {
                        this.list_data.forEach((item) => {
                            if (this.checkedNames.indexOf(item.id) == -1) {
                                this.checkedNames.push(item.id)
                            }
                        })
                    }
                },
                del: function (e) {
 
                this.$messagebox.show({'title':'hello','describe':'everyOne'},{cb:function () {
                    alert('点击确认以后的回调')
                },buttonName:['关闭','确定']});
           
                    console.log(e);
                },
                dels: function () {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        alert(1);
                        // rows.splice(index, 1);
                        // this.$message({
                        //     type: 'success',
                        //     message: '删除成功!'
                        // });
                    }).
                    catch (() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // });
                    });

                    console.log(this.checkedNames);


                },
                onSubmit() {
                    console.log('submit!');
                }
            }
        })
         //这是我们预留的分页和搜索用的
         app.post();

         //删除、全删
         //添加
         //修改
         //分页
         //查询

         // 表初始化
         //   extend: {
         //                 index_url: 'article/index',
         //                 add_url: 'article/add',
         //                 edit_url: 'article/edit',
         //                 del_url: 'article/del',
         //                 multi_url: 'article/multi',
         //                 table: 'article',
         //             }

         //      ajax
         //      生成分页
         //      生成表格(特殊字段、排序)
         //      生成搜索 
         //      生成快捷按钮
        </script>
        <script>
        
        </script>
    </body>

</html>