牛骨文教育服务平台(让学习变的简单)
博文笔记

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

创建时间:2017-03-18 投稿人: 浏览次数:147
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>





声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。