vue表格合併單元格

某某講啊發表於2019-08-27
Vue

需求

vue表格同列不同行的相同內容合併單元格，直接看圖更直觀。

原表格

vue表格合併單元格
效果
vue表格合併單元格

很明顯，後一列的合併項受前一項的合併項的限制。

實現

廢話不多說，直接上程式碼

<template>
  <div class="table_box">
    <table class="table">
      <thead>
        <tr>
          <th>序號</th>
          <th>名字</th>
          <th>性別</th>
          <th>年齡</th>
          <th>地址</th>
          <th>興趣</th>
          <th>電話</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td>{{index}}</td>
          <td ref="td">{{item.name}}</td>
          <td ref="td">{{item.sex}}</td>
          <td ref="td">{{item.age}}</td>
          <td ref="td">{{item.address}}</td>
          <td ref="td">{{item.habit}}</td>
          <td ref="td">{{item.tel}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
     data: [
       {name: '小明', sex: '男', age: '24', address: '湖北', habit: '籃球', tel: '15927001701'},
       {name: '小明', sex: '男', age: '24', address: '湖北', habit: '籃球', tel: '15927001702'},
       {name: '小明', sex: '男', age: '24', address: '湖北', habit: '足球', tel: '15927001703'},
       {name: '小明', sex: '男', age: '24', address: '湖南', habit: '籃球', tel: '15927001704'},
       {name: '小明', sex: '男', age: '23', address: '湖南', habit: '籃球', tel: '15927001705'},
       {name: '小明', sex: '男', age: '23', address: '湖北', habit: '籃球', tel: '15927001706'},
       {name: '小明', sex: '男', age: '24', address: '湖北', habit: '籃球', tel: '15927001707'},
       {name: '小明', sex: '女', age: '24', address: '湖北', habit: '籃球', tel: '15927001708'},
       {name: '小紅', sex: '女', age: '24', address: '湖北', habit: '籃球', tel: '15927001709'},
       {name: '小紅', sex: '女', age: '24', address: '湖南', habit: '籃球', tel: '15927001700'}
     ]
    }
  },
  mounted() {
    this.merge()
  },
  methods: {
    merge() 
      // 如果資料是亂序，整理順序，按自己的資料結構排序
      // this.data.sort((a,b) => {
      //   return JSON.stringify(a) >=JSON.stringify(b)?1:-1;
      // })
      // console.log(this.data)
      this.$nextTick(() => {
        var tds = this.$refs.td;
        console.log(tds)
        let  n=0; // 每次合併單元格從第幾行開始合併
        for(let col=0,collen=6; col<collen;col++) {
          n=0;
          for(let row=0,len=this.data.length; row<len;row++) {
            if(n!=row && tds[col+n*collen].innerHTML == tds[col+row*collen].innerHTML) {
              if(col!=0) {
                if(tds[col+row*collen-1].rowSpan == 0){ // 前一列被合併，才能進行此列合併
                  tds[col+n*collen].rowSpan = tds[col+n*collen].rowSpan + 1;
                  tds[col+row*collen].rowSpan = 0;
                  tds[col+row*collen].hidden = true;
                }else {
                  n=row;  // 合併中止，重置開始合併行
                }
              }else {
                  tds[col+n*collen].rowSpan = tds[col+n*collen].rowSpan + 1;
                  tds[col+row*collen].rowSpan = 0;
                  tds[col+row*collen].hidden = true;
              }
            }else {
              n=row;  // 合併中止，重置開始合併行
            }
          }
        }
      })
      
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.table_box{
  .table{
    border: 1px solid #cccccc;
    border-collapse: collapse;
    th{
      // align-items: center;
      padding: 10px 20px;
      border: 1px solid #cccccc;
      text-align: left;
    }
    td{
      padding: 10px 20px;
      border: 1px solid #cccccc;
      text-align: left;
    }
  }
}
</style>

複製程式碼

相關文章