今天美工给了个图,要实现这样的功能。
后台返来的数据结构,是这样的
试了几次,我是这样实现的。
1、html
<table> <thead> <tr> <td>序号</td> <td>挂单号</td> </tr> </thead> <tbody id="tblList"> <tr v-for="(item,index) in dataarr" :class="index==curindex? 'active':''"> <td>{{index+1}}</td> <td @click="changeorder(item,index)">{{item.orderCode}}</td> </tr> </tbody> </table> </div> <div class="fl spinfo"> <table> <thead> <tr> <td>序号</td> <td>商品编号</td> <td>商品名称</td> <td>数量</td> <td>售价</td> <td>金额</td> </tr> </thead> <tbody> <tr v-for="(list,index) in splist[curindex]"> <td>{{index+1}}</td> <td>{{list.productId}}</td> <td>{{list.productname}}</td> <td>{{list.salequantity}}</td> <td>{{list.saleprice}}</td> <td>{{list.subtotalamountsale}}</td> </tr> </tbody> </table>
2、js
export default { props: ["arr"],//从父组件传来的数据 data() { return { dataarr: this.arr, curindex: 0, splist: [] }; }, mounted() { this.getsplist(); }, methods: { getsplist() { for (let i = 0; i < this.arr.length; i++) { this.splist.push(this.arr[i].orderGoods); } return splist;//把数组里面的数组循环了出来,和外面的数组通过curindex 联系 }, changeorder(item, index) { this.curindex = index; } } };
后经过同事指点,不必如此麻烦,可以直接这样。
1、html
<table> <thead> <tr> <td>序号</td> <td>挂单号</td> </tr> </thead> <tbody id="tblList"> <tr v-for="(item,index) in dataarr" :class="index==curindex? 'active':''"> <td>{{index+1}}</td> <td @click="getsplist(item,index)">{{item.orderCode}}</td> </tr> </tbody> </table> </div> <div class="fl spinfo"> <table> <thead> <tr> <td>序号</td> <td>商品编号</td> <td>商品名称</td> <td>数量</td> <td>售价</td> <td>金额</td> </tr> </thead> <tbody> <tr v-for="(list,index) in splist"> <td>{{index+1}}</td> <td>{{list.productId}}</td> <td>{{list.productname}}</td> <td>{{list.salequantity}}</td> <td>{{list.saleprice}}</td> <td>{{list.subtotalamountsale}}</td> </tr> </tbody> </table>
2、js
export default { name: "getOrder", props: ["arr"], data() { return { dataarr: this.arr, curindex: 0, splist: this.arr[0].orderGoods//默认是第一个的商品信息 }; }, methods: { getsplist(item,index) { this.curindex = index;//添加点击的样式用 this.splist=item.orderGoods//当前数组是循环的那个商品信息 }, } };