vue利用v-for嵌套输出多层对象,分别输出到个表的方法

 更新时间:2018年09月07日 15:30:35   作者:阿之阿佐  
今天小编就为大家分享一篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

specifications:[
 {
  specificationName:"颜色",
  specificationItem:[
   {value:"黄色"},
   {value:"黑色"}
   ]
 }
]
<table class="table table-bordered table-hover table-item spggdytable"
  id="ggxtable" v-show="isAddSpecifications">
 <thead>
 <tr>
  <th>排序</th>
  <th>规格项</th>
  <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(item,index) in specifications">
  <td>{{index}}</td>
  <td>{{item.specificationName}}</td>
  <td>
   <a href='#'> <img src='../img/common_edit@25.png' alt='修改'></a>
   <a href='#'><img src='../img/common_del@25.png' alt='删除'></a>
  </td>
 </tr>
 </tbody>
</table>
<table class="table table-bordered table-hover table-item spggdytable"
  id="ggztable" v-show="isAddSpecifications">
 <thead>
 <tr>
  <th>规格值</th>
  <th>操作</th>
 </tr>
 </thead>
 <tbody v-for="(item,index) in specifications">
 <tr v-for="(part,n) in item.specificationItem">
  <td>{{part.value}}</td>
  <td>
   <a href='#'> <img src='../img/common_edit@25.png' alt='修改'></a>
   <a href='#'><img src='../img/common_del@25.png' alt='删除'></a>
  </td>
 </tr>
 </tbody>
</table>

以上这篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue element实现将表格单行数据导出为excel格式流程详解

    vue element实现将表格单行数据导出为excel格式流程详解

    这篇文章主要介绍了vue element实现将表格单行数据导出为excel格式流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • Vue的异步渲染axios问题

    Vue的异步渲染axios问题

    这篇文章主要介绍了Vue的异步渲染axios问题,具有很好的参考价值,希望对大家有所帮助。
    2023-03-03
  • Vue组件的实现原理详细分析

    Vue组件的实现原理详细分析

    在日常业务开发中我们会经常封装一些业务组件,下面这篇文章主要给大家介绍了关于Vue组件的实现原理,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 一文带你吃透Vue3编译原理

    一文带你吃透Vue3编译原理

    一直对编译原理的东西都有一种恐惧感,感觉太难了,看不懂,打开vue3源码看到编译相关的代码,直接吓退。不要担心,小编今天带你一文吃透Vue3编译原理
    2023-02-02
  • Vue+Mock.js模拟登录和表格的增删改查功能

    Vue+Mock.js模拟登录和表格的增删改查功能

    这篇文章主要介绍了Vue+Mock.js模拟登录和表格的增删改查功能,需要的朋友可以参考下
    2018-07-07
  • vuex数据持久化的两种实现方案

    vuex数据持久化的两种实现方案

    在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下
    2021-07-07
  • 前端vue+elementUI如何实现记住密码功能

    前端vue+elementUI如何实现记住密码功能

    这篇文章主要给大家介绍了关于vue+elementUI如何实现记住密码功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue打包并部署到nginx上的实现示例

    vue打包并部署到nginx上的实现示例

    本文主要介绍了vue打包并部署到nginx上的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • vue-quill-editor+plupload富文本编辑器实例详解

    vue-quill-editor+plupload富文本编辑器实例详解

    这篇文章主要介绍了vue-quill-editor+plupload富文本编辑器实例详解,需要的朋友可以参考下
    2018-10-10
  • Vue 指令实现按钮级别权限管理功能

    Vue 指令实现按钮级别权限管理功能

    这篇文章主要介绍了Vue 指令实现按钮级别权限管理功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04

最新评论