• 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//当前数组是循环的那个商品信息
         },
      }
    };
  • 相关阅读:
    【python入门到放弃】冒泡排序
    【python入门到放弃】变量、常量与注释
    环信和融云实现跨应用聊天
    swift里类方法和构造方法的使用来减少代码冗余提高开发效率
    git 常用命令 使用及iOS开发使用git管理项目步骤
    获取IPA包文件中的图片资源
    iOS11适配和iPhonex适配资料收集整理
    IOS 开发delegate和block的区别整理资料收集 (文章中内容有参考网络资料)
    IOS开发中集合操作 处理数据的 交集 并集 差集
    联系苹果人员的方式(转)
  • 原文地址:https://www.cnblogs.com/zhoujuan/p/11757272.html
Copyright © 2020-2023  润新知