• 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//当前数组是循环的那个商品信息
         },
      }
    };
  • 相关阅读:
    mybatis_7分页查询
    mybatis_6日志工厂
    mybatis_5解决属性名和字段名不一致的问题(resultMap)
    mybatis_4配置解析
    mybatis_3CRUD操作
    ARM C函数调用堆栈入栈顺序
    syscall SYSCALL_DEFINE*()实现
    ko kallsyms
    elf文件结构解析
    ko module加载flow
  • 原文地址:https://www.cnblogs.com/zhoujuan/p/11757272.html
Copyright © 2020-2023  润新知