vue.js框架之表单排序&分页

最新推荐文章于 2024-08-02 16:35:51 发布

涉水的小菜叽

最新推荐文章于 2024-08-02 16:35:51 发布

阅读量1k

点赞数

分类专栏： vue-js

本文链接：https://blog.csdn.net/xxhdcblogzh888/article/details/76974843

版权

vue-js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../lib/vue.min.js" type="text/javascript"></script>
        <title>表格组件</title>
    </head>
    <body>
        <div id="app">
            <mydiv v-bind:info="info" v-bind:header="header" v-bind:num="num" v-bind:page="page"></mydiv>
        </div>
        <script type="text/x-template" id="mysc">
            <div>
                <table>
                    <tr>
                        <th v-for='x in header' v-on:click="bit(x)">{{x.key}}</th>
                    </tr>
                    <tr v-for="y in fenye">
                        <th v-for="x in header">{{y[x.name]}}</th>
                    </tr>
                </table>
                <button v-on:click="lastPage">上一页</button>          
                <button v-on:click="nextPage">下一页</button>      
            </div>
        </script>
        <script type="text/javascript">
            Vue.component('mydiv',{
                template:'#mysc',
                props:{
                    /*属性不能用驼峰命名法*/
                    info:Array,
                    header:Array,
                    num:Number,
                    page:Number,
                    boolen:Boolean,
                    tiaojian:String
                },
                data: function() {
                    return {}
                },
                computed:{
                    fenye:function(){
                        /*排序*/
                        var list=this.info;
                        var paixu=this.tiaojian;
                            for(var i = 1;i<list.length;i++){
                                for(var j=0;j<list.length-i;j++){
                                    if(this.boolen){
                                        if(list[j][paixu]>list[j+1][paixu]){
                                            var k=list[j+1];
                                            list[j+1]=list[j];
                                            list[j]=k;
                                        }
                                    }else{
                                        if(list[j][paixu] < list[j + 1][paixu]) {
                                            var k;
                                            k = list[j];
                                            list[j] = list[j + 1];
                                            list[j + 1] = k;
                                        }
                                    }
                                }
                            }
                        /*分页*/
                        var list2 = [];
                        var start= this.num*(this.page-1);
                        var end=start+this.num;
                        if(end<list.length){
                            for(var i =start;i<end;i++){
                                list2.push(list[i])
                            }
                        }else{
                            for(var i =start;i<list.length;i++){
                                list2.push(list[i])
                            }
                        }
                        return list2;
                    }
                },
                methods:{
                    bit:function(x){
                        this.boolen=!this.boolen;
                        this.tiaojian=x.name;                       
                    },
                    lastPage:function(){
                        console.log(this.num)
                        if(this.page > 1) {
                            this.page = this.page - 1;
                        }
                    },
                    nextPage: function() {
                        var pageNum = this.info.length / this.num;
                        if(this.page < pageNum) {
                            this.page = this.page + 1;
                        }
                    }
                }
            })

            var phone=new Vue({
                el:'#app',
                data:{
                    boolen:true,
                    num:5,
                    page:1,
                    info:[],
                    header:[{
                        key: '名称',
                        name:'name'
                    }, {
                        key: '价格',
                        name:'price'
                    }, {
                        key: '数量',
                        name:'num'
                    }]
                }
            })
            for(var i = 0;i<22;i++){
                 phone.info.push({
                    name:'手机'+i,
                    num:i,
                    price:100*i
                 })
                 console.log(111)
            }
        </script>
    </body>
</html>