欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue中HTML的table标签表格合并

程序员文章站 2022-04-19 20:25:51
...
<div id="app">
    <!-- 
      需求: 规格商品: 同一种商品可能有不同规格,需要将规格商品的'运费'和'名称'列在行方向上合并
     -->
   <table border="1" cellpadding="0" cellspacing="0">
     <thead>
       <tr>
        <th>商品名称</th>
        <th>商品编号</th>
        <th>商品规格</th>
        <th>商品单价</th>
        <th>商品数量</th>
        <th>运费</th>
      </tr>
     </thead>
     <tbody>
       <tr v-for="(item,index) in productList" :key="index">
         <td v-if="spanArr[index]" :rowspan="spanArr[index]" :colspan="1">{{item.name}}</td>
         <td>{{item.code}}</td>
         <td>{{item.attrs}}</td>
         <td>{{item.price}}</td>
         <td>{{item.num}}</td>
         <td v-if="spanArr[index]" :rowspan="spanArr[index]" :colspan="1">{{item.freight}}</td>
       </tr>
     </tbody>
   </table>
  </div>

<script>
    let vue = new Vue({
      el:'#app',
      data() {
        return {
          productList:[],
          spanArr: [],  //记录当前单元格向下合并的行数,为0的话说明该单元格在行方向上已被合并不用显示
          pos: 0  // 记录当前单元格所处的行下标
        }
      },
      methods: {
        // 初始化商品数据
        init() {
          this.productList = [
          {
              id: '0001',
              code: 'X10001',
              name:'葡萄',
              attrs:'红色;500g',
              price: 50,
              num: 1,
              freight: 15
            },
            {
              id: '0001',
              code: 'X10002',
              name:'葡萄',
              attrs:'绿色;500g',
              price: 30,
              num: 1,
              freight: 15
            },
            {
              id: '0001',
              code: 'X10003',
              name:'葡萄',
              attrs:'白色;500g',
              price: 30,
              num: 1,
              freight: 15
            },
            {
              id: '0002',
              code: 'X20001',
              name:'芒果',
              attrs:'黄色;500g',
              price: 50,
              num: 1,
              freight: 15
            }
          ]
          this.getRows()
        },
        // 初始化需要合并的数据数组,计算合并后需要展示的行数
        // 以数组中每条数据的商品id来判断,如果商品id相同说明是同一种商品的不同规格,则需要合并
        getRows() {
          let list = this.productList;
          list.forEach((ele,i)=>{
            if(i===0) {
              // 第一行,一定展示不需要合并
              this.spanArr.push(1)
              this.pos = 0;
            }else {
              // 非第一行
              if(ele.id === list[i-1].id) {
                // 当前行的id和上一行的id相同了,则当前行需要和上一行的进行合并,当前行的该单元格不显示
                this.spanArr[this.pos] +=1        //需要向下合并的行数加1
                this.spanArr.push(0)
              }else {
                this.spanArr.push(1)
                this.pos = i
              }
            }
          })
          console.log('合并的数据',this.spanArr);
        }
      },
      created() {
        this.init()
      },
    })
</script> 

合并后的表格效果如下图所示:

Vue中HTML的table标签表格合并

相关标签: JavaScript