vue 合并表格行

最新推荐文章于 2024-03-19 20:03:48 发布

阿之阿佐

最新推荐文章于 2024-03-19 20:03:48 发布

阅读量5.8k

点赞数

分类专栏：个人代码文章标签： vue 表格合并

本文链接：https://blog.csdn.net/u010214074/article/details/78732905

版权

个人代码专栏收录该内容

67 篇文章 1 订阅

订阅专栏

<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>