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//當前數組是循環的那個商品信息
     },
  }
};