vue-自动合并相同内容行

 

 html: 

　　　　<table id="myTable" border="1" cellpadding="15" cellspacing="0">
　　　　  <tr>
　　  　　  <!--<th>ID</th>-->
 　　　　 　　  <th>姓名</th>
  　　　　　　  <th>标题</th>
 　　　　 　　  <th>编码</th>
 　　　　 　　  <th>爱好</th>
　　　　  </tr>
　　　　  <tr v-for="item in dataT">
　　   　　　　 <td v-if="key!='id'" v-for="(val,key) in item" :rowspan="rowSpanF(key,val)">{{val}}</td>
　　　　  </tr>
　　　　</table>

<script>
  import $ from 'jquery'

  export default {
    data() {
      return {
        dataT: [],
        items: [
          {
            id: 1,
            name: '张三',
            title: '生活',
            code: 'ZS123',
            content: 'uiui',

          },
          {
            id: 1,
            name: '张三',
            title: '生活',
            code: 'ZS123',
            content: '2.学习',

          },
          {
            id: 1,
            name: '张三',
            title: '生活',
            code: 'ZS123',
            content: '3.工作',

          },
          {
            id: 2,
            name: 'Ivy',
            title: '旅游',
            code: 'Ivy5',
            content: '工作/学习',

          },
          {
            id: 2,
            name: 'Ivy',
            title: '旅游,志愿者',
            code: 'Ivy5',
            content: '工作/学习',
          }
        ]
      }
    },
    created: function () {
      const that = this;
      let arry = [];
      let itemsCopy = JSON.parse(JSON.stringify(that.items));
      for (let i = 0; i < itemsCopy.length; i++) {
        for (let j = (i + 1); j < itemsCopy.length; j++) {
          for (let h in itemsCopy[i]) {
            for (let k in itemsCopy[j]) {
              if (h === k && itemsCopy[i][h] === itemsCopy[j][k]) {
                delete  itemsCopy[j][k]
              }
            }
          }
        }
        arry.push(itemsCopy[i]);
      }
      that.dataT = arry;
    },
    methods: {
      rowSpanF: function (key, val) {
        const that = this;
        let num = 0;
        for (let i in that.items) {
          for (let j in that.items[i]) {
            if (key === j && val === that.items[i][j]) {
              num++;
            }
          }
        }
        return num;
      },
    }
  }


</script>