首页 > 代码库 > 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小荔枝
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。