使用vue中的v-for遍历二维数组的方法

 更新时间:2018年03月07日 14:33:49   作者:青丘耳畔  
下面小编就为大家分享一篇使用vue中的v-for遍历二维数组的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'>
   <tr v-for='(item, index) in data'>
    <template v-for='items in item'>
     <template v-for='(itemss, indexs) in items' v-if='indexs !== "type"'>
      <td>{{itemss}}</td>
     </template>
    </template>
   </tr>

其中,data数据为:

this.data = [
   [
    {
     type: '',
     name: '资产',
     start: '期末余额',
     end: '期初余额'
    },
    {
     type: '',
     name: '负债和所有者权益(或股东权益)',
     start: '期末余额',
     end: '期初余额'
    }
   ],
   [
    {
     type: '',
     name: '资产',
     start: 125000,
     end: 12534567
    },
    {
     type: '',
     name: '负债',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '货币资金',
     start: 125000,
     end: 12534567
    },
    {
     type: '负债',
     name: '应付短期融资款',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '其中:客户存款',
     start: 125000,
     end: 12534567
    },
    {
     type: '',
     name: '所有者权益(或股东权益)',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '',
     start: '',
     end: ''
    },
    {
     type: '所有者权益(或股东权益',
     name: '实收资本(或股本)',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '资产总计',
     start: 111,
     end: 11
    },
    {
     type: '所有者权益(或股东权益',
     name: '资本公积',
     start: 125000,
     end: 12534567
    }
   ]
  ]

结果:

以上这篇使用vue中的v-for遍历二维数组的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue前后端分离如何解决每次请求session都会变的问题

    vue前后端分离如何解决每次请求session都会变的问题

    这篇文章主要介绍了vue前后端分离如何解决每次请求session都会变的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue使用xlsx库和xlsx-style库导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽

    vue使用xlsx库和xlsx-style库导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽

    xlsx是由SheetJS开发的一个处理excel文件的npm库,适用于前端开发者实现导入导出excel文件的经典需求,这篇文章主要介绍了vue使用xlsx库和xlsx-style库导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽,需要的朋友可以参考下
    2023-11-11
  • vue用BMap百度地图实现即时搜索功能

    vue用BMap百度地图实现即时搜索功能

    这篇文章主要为大家详细介绍了vue用BMap百度地图实现即时搜索功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vue3组件间传值避坑方法指南

    Vue3组件间传值避坑方法指南

    这篇文章主要为大家介绍了Vue3组件间传值避坑方法指南,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • ant-design-vue table分页onShowSizeChange后的pageNo解决

    ant-design-vue table分页onShowSizeChange后的pageNo解决

    这篇文章主要介绍了ant-design-vue table分页onShowSizeChange后的pageNo的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue3中如何使用ts

    vue3中如何使用ts

    这篇文章主要介绍了vue3中如何使用ts,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 解决Vue-Router升级导致的Uncaught (in promise)问题

    解决Vue-Router升级导致的Uncaught (in promise)问题

    这篇文章主要介绍了解决Vue-Router升级导致的Uncaught (in promise)问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 开发一个封装iframe的vue组件

    开发一个封装iframe的vue组件

    这篇文章主要介绍了开发一个封装iframe的vue组件,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 移动端Vue2.x Picker的全局调用实现

    移动端Vue2.x Picker的全局调用实现

    这篇文章主要介绍了移动端Vue2.x Picker的全局调用实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • VUE 3D轮播图封装实现方法

    VUE 3D轮播图封装实现方法

    这篇文章主要为大家详细介绍了VUE 3D轮播图封装实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07

最新评论