vue 循环展示双层数组 ，及给点击当前的元素加样式

今天美工给了个图，要实现这样的功能。

 

 后台返来的数据结构，是这样的

 

 试了几次，我是这样实现的。

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//当前数组是循环的那个商品信息
     },
  }
};