首页 > 代码库 > vue分页tbale小荔枝

vue分页tbale小荔枝

首先,动态加载数据

<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 = http://www.mamicode.com/[];//清空数据包开始写入数据"#01AAED"
                , jump: function (obj, first) {
                    //console.log(obj.curr)//下标
                    fXjg.pageI = ((obj.curr) - 1);
                }
            });
        }
    }

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

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

vue分页tbale小荔枝