table根据相同内容动态合并单元格

1、实现效果

2、 主要实现逻辑

combineCell(list) {
			      for (var field in list[0]) {  // 获取数据中的字段，也就是table中的column，只需要取其中一条记录的就可以了
			        // 定义数据list的index
			        var k = 0;
			        while (k < list.length) {
			          // 增加字段-用于统计有多少重复值
			          list[k][field + 'span'] = 1;
			          // 增加字段-用于控制显示与隐藏
			          list[k][field + 'dis'] = '';
			          for (var i = k + 1; i <= list.length - 1; i++) {
			            // 判断第k条数据的field字段，与下一条是否重复
			            if (list[k][field] === list[i][field] && list[k][field] !== '') {
			              // 如果重复，第k条数据的字段统计+1
			              list[k][field + 'span']++;
			              // 设置为显示
			              list[k][field + 'dis'] = '';
			              // 重复的记录，则设置为1，表示不跨行
			              list[i][field + 'span'] = 1;
			              // 并且该字段设置为隐藏
			              list[i][field + 'dis'] = 'none';
			            } else {
			              break;
			            }
			          }
			          // 跳转到第i条数据的索引
			          k = i;
			        }
			      }
			      console.log(list);
			      // this.ccxx = cloneDeep(list);
			      this.booklist = list;
			    },
			

3、完整demo

<template>
	<view class="page">
		<view class="home">
			<view class="box">
				<table width="100%" border="1" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="collapse">
					<tr>
						<th width="5%" class="font-center" rowspan="1">序号</th>
						<th width="10%" class="font-center" rowspan="1">分类</th>
						<th width="10%" class="font-center" rowspan="1">书名</th>
						<th width="5%" class="font-center" rowspan="1">作者</th>
						<th width="5%" class="font-center" rowspan="1">出版时间</th>
					</tr>
				</table>
				<table id="contentTable" name="contentTable"  width="100%" border="1" cellspacing="1" cellpadding="4" align="center" class="collapse" >
					<tr  v-for="(item,index) in booklist" :key="index">
						<td width="5%" class="font-center" >{{item.number}}</td>
						<td width="5%" class="font-center"  :rowspan="item.typespan" :style="{ display: item.typedis }">{{item.type}}</td>
						<td width="10%" class="font-center" :rowspan="item.booknamespan" :style="{ display: item.booknamedis }">{{item.bookname}}</td>
						<td width="10%" class="font-center" :rowspan="item.writerspan" :style="{ display: item.writerdis }">{{item.writer}}</td>
						<td width="5%" class="font-center" >{{item.presstime}}</td>
					</tr>
				</table>	
			</view>
		</view>
	</view>
</template>

<script type="text/javascript" defer=true>
	
	export default {
	     components: {
	       
	      },
		data() {
			return {
				list:[{
					number:'1',
					type:'长篇小说',
					bookname:'《活着》',
					writer:'余华',
					presstime:'1993年',
				},{
					number:'2',
					type:'长篇小说',
					bookname:'《在细雨中呐喊》',
					writer:'余华',
					presstime:'1991年',
					
				},{
					number:'3',
					type:'长篇小说',
					bookname:'《骆驼祥子》',
					writer:'老舍',
					presstime:'1939年',
					
				},{
					number:'4',
					type:'散文集',
					bookname:'《达夫游记》',
					writer:'郁达夫',
					presstime:'1936年',
					
				},{
					number:'5',
					type:'散文集',
					bookname:'《闲书》',
					writer:'郁达夫',
					presstime:'1936年',
					
				},{
					number:'6',
					type:'短篇小说',
					bookname:'《骆驼祥子》',
					writer:'老舍',
					presstime:'1939年',
					
				}],
				booklist:[],
			}
		},
		computed: {
		   

		},
		onLoad() {
			this.combineCell(this.list) 
			
		},
		methods: {
			combineCell(list) {
			      for (var field in list[0]) {  // 获取数据中的字段，也就是table中的column，只需要取其中一条记录的就可以了
			        // 定义数据list的index
			        var k = 0;
			        while (k < list.length) {
			          // 增加字段-用于统计有多少重复值
			          list[k][field + 'span'] = 1;
			          // 增加字段-用于控制显示与隐藏
			          list[k][field + 'dis'] = '';
			          for (var i = k + 1; i <= list.length - 1; i++) {
			            // 判断第k条数据的field字段，与下一条是否重复
			            if (list[k][field] === list[i][field] && list[k][field] !== '') {
			              // 如果重复，第k条数据的字段统计+1
			              list[k][field + 'span']++;
			              // 设置为显示
			              list[k][field + 'dis'] = '';
			              // 重复的记录，则设置为1，表示不跨行
			              list[i][field + 'span'] = 1;
			              // 并且该字段设置为隐藏
			              list[i][field + 'dis'] = 'none';
			            } else {
			              break;
			            }
			          }
			          // 跳转到第i条数据的索引
			          k = i;
			        }
			      }
			      console.log(list);
			      // this.ccxx = cloneDeep(list);
			      this.booklist = list;
			    },
			
		}
	}
</script>

<style lang="scss">
   @import './demo.scss';
</style>

 4、最开始的时候在网上找了很多种方法，都涉及到用var tb= document.getElementId('tb)来获取table数据，但是尝试了多种方法都无法获得tb.rows的数据，因此放弃用获取ID的方式。本篇中记录的方式是亲测有用的。