vue分页tbale小荔枝

Posted 2020-09-29 webSong

首先，动态加载数据

<table class="table table-bordered table-condensed no_margin_bottom jyjg_tab">
    <tr>
       <th>股票代码</th>
           <td v-text=‘pageData[pageIndex[pageI][0]].stockCode‘></td>
           <td v-text=‘pageData[pageIndex[pageI][1]].stockCode‘></td>
   </tr>
   <tr>
       <th>交易日期</th>
       <td v-text=‘pageData[pageIndex[pageI][0]].date‘></td>
       <td v-text=‘pageData[pageIndex[pageI][1]].date‘></td>
   </tr>
　　……省略
</table>
<div id="page_1" class="page_"></div>

　　

vue-data:

　　　　　　dataG: {
            zijinfenpei: 0,//资金分配
            zijinfenshu: 0,//资金分数
            jizhunjiage: 0,//基准价格
            meibijiaoyijine: 0,//每笔交易金额
            jiaoyifeilv: 0,//交易费率
            dicangbili: 0,//底仓比例
            shangzhangxiaxian: 0,//上涨下跌用一个
            qujianshangxian: 0,//区间上限
            qujianxiaxian: 0,//区间下限
            zijinyue: 0,//资金余额
            zhengquanshizhi: 0,//证券市值
            zichanzongzhi: 0,//资产总值
            chigubudong: 0,//持股不动
            qujianjiaoyizhihou: 0,//区间交易之后
            tongqidapan: 0,//同期大盘
            gaopaobishu: 0,//高抛笔数
            dixibishu: 0,//低吸笔数
            zhengquanshuliang: 0,//证券数量
            jiaoyichengben: 0,//交易成本
            zengshoujine: 0//增收金额
        },
        pageData: [//交易结果数据包--格式            
            {
                stockCode: ‘--‘,//股票代码
                count: "--",//交易数量
                qujianjiage: ‘--‘,//区间价格
                date: ‘--‘,//交易时间
                jiaoyileixing: 1,//交易类型 1=买入 2=卖出
                gaodiguaidian: ‘--‘,//高低拐点
                price: ‘--‘//交易价格
            },
           {
               stockCode: ‘--‘,//股票代码
               count: "--",//交易数量
               qujianjiage: ‘--‘,//区间价格
               date: ‘--‘,//交易时间
               jiaoyileixing: ‘--‘,//交易类型 1=买入 2=卖出
               gaodiguaidian: ‘--‘,//高低拐点
               price: ‘--‘//交易价格
           },
        ],
        pageIndex: [[0, 1]],//存储分页组数的下标数据包
        pageI: 0,//分页数据下标

vue-fn:

pageRecord: function (data) {//交易记录
            //console.log(data) //打印数据包            
            var thas = this, dataArr = data, lenght_ = data.length, arr = [];//公用变量

            thas.pageData = [];//清空数据包开始写入数据
            for (i in data) {
                var data_arr = data[i];
                thas.pageData.push({
                    stockCode: data_arr.code,
                    count: data_arr.count,
                    date: data_arr.date,
                    qujianjiage: data_arr.chufajia,
                    jiaoyileixing: data_arr.buyOrSel,
                    gaodiguaidian: data_arr.gaodi,
                    price: data_arr.price
                })
            }

            thas.pageIndex = [];//清空

            for (var i = 0; i < lenght_; i++) {
                arr.push(i)
            }
            function arrSlice(arr, num) {
                var arr1 = [];
                for (var i = 0; i < arr.length / num; i++) {
                    arr1.push(arr.slice(num * i, num * i + num))
                }
                return arr1;
            }
            thas.pageIndex = arrSlice(arr, 2) //将数组弄成下标分组
            //console.log(thas.pageIndex)

            //测试数量分页   
            thas.page_index();
            //JyJl.page_index();还有一个其他的分页

        },
        page_index: function () {
            laypage({ //这个分页空间用的是layui框架的
                cont: ‘page_1‘
                , pages: Math.ceil(fXjg.pageData.length / 2)
                , groups: 5
                , first: false
                , last: false
                , skin: "#01AAED"
                , jump: function (obj, first) {
                    //console.log(obj.curr)//下标
                    fXjg.pageI = ((obj.curr) - 1);
                }
            });
        }
    }

　　事件驱动当然是有某一个按钮之类的请求了ajax，拿到数据后，在成功回调函数里使用了这个fxjg.pageRecord(data);

vue的数据双向绑定让我们省去了很多很多代码，如果是用jqueryDom操作的话，这点代码根本不行。