vue 合并表格行
border="1" width="500px" style="height: 400px;margin-right: 200px;">颜色分类尺寸v-for="item in dataList">:rowspan="item.ptSpecificationValueData.le
·
<template> <div> <table border="1" width="500px" style="height: 400px;margin-right: 200px;"> <tr> <th>颜色分类</th> <td>尺寸</td> </tr> <template v-for="item in dataList"> <tr> <td :rowspan="item.ptSpecificationValueData.length">{{item.ptSpecificationName}}</td> <td>{{item.ptSpecificationValueData[0].ptSpecificationValueValue}}</td> </tr> <tr v-for="son in item.ptSpecificationValueData.length-1"> <td >{{item.ptSpecificationValueData[son].ptSpecificationValueValue}}</td> </tr> </template> </table> </div> </template> <script type="text/ecmascript-6"> export default { data() { return { dataList: [ { "ptSpecificationId": "1111", "ptSpecificationName": "红色", "ptSpecificationValueData": [ { "ptSpecificationValueId": "sadasd", "ptSpecificationValueValue": "1", }, { "ptSpecificationValueId": "1239977", "ptSpecificationValueValue": "2", } , { "ptSpecificationValueId": "1239977", "ptSpecificationValueValue": "3", } ] }, { "ptSpecificationId": "1111", "ptSpecificationName": "蓝色", "ptSpecificationValueData": [ { "ptSpecificationValueId": "sadasd", "ptSpecificationValueValue": "11", }, { "ptSpecificationValueId": "1239977", "ptSpecificationValueValue": "22", }, { "ptSpecificationValueId": "1239977", "ptSpecificationValueValue": "33", } , { "ptSpecificationValueId": "1239977", "ptSpecificationValueValue": "44", } , { "ptSpecificationValueId": "1239977", "ptSpecificationValueValue": "55", } ] } ] } }, components: {}, methods: { objectSpanMethod({row, column, rowIndex, columnIndex}) { } } } </script> <style lang="scss" scoped> </style>
更多推荐
已为社区贡献14条内容
所有评论(0)