我爱自学网 · 源码
发现乱码?点我试试!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<div id="app">
	numArr:{{numArr}} rowspanArr:{{rowspanArr}} rowLen:{{rowLen}} indexArr:{{indexArr}}
	<table class="table table-bordered">
		<thead>
			<tr><th v-for="item in items">{{item.name}}</th></tr>
		</thead>
		<tbody>
			<tr v-for="(item, index) in rowLen">
				<td v-for="(item2, index2) in items" v-if="index % rowspanArr[index2] == 0" :rowspan="rowspanArr[index2]">{{item2.sub_items[currentIndex(index2)].val}}</td>
			</tr>
		</tbody>
	</table>
</div>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var testData = [
		{id: 1, name: '颜色', sub_items: [
			{id: 1, val: '红色'},
			{id: 2, val: '绿色'},
			{id: 3, val: '蓝色'},
		]},
		{id: 2, name: '尺码', sub_items: [
			{id: 4, val: 'S'},
			{id: 5, val: 'M'},
			{id: 6, val: 'L'},
		]},
		{id: 3, name: '重量', sub_items: [
			{id: 7, val: '10'},
			{id: 8, val: '20'},
			{id: 9, val: '30'},
		]},
	];
	
	var vm = new Vue({
		el: '#app',
		data: {
			items: testData,
			rowLen: 0,
			indexArr: new Array(),
		},
		computed: {
			numArr: function() {
				var tempArr = new Array();
				var indexArr = new Array();
				for (var i = 0; i < this.items.length; i++) {
					tempArr[i] = this.items[i].sub_items.length;
					indexArr[i] = 0;
				}
				this.indexArr = indexArr;
				return tempArr;
			},
			rowspanArr: function() {
				var tempArr = new Array();
				var numArr = this.numArr;
				var rowLen = 1;
				for (var i = 0; i < numArr.length; i++) {
					rowLen = rowLen * numArr[i];
					var tmpNum = 1;
					for (var j = numArr.length - 1; j > i; j--) {
						tmpNum = tmpNum * numArr[j];
					}
					tempArr.push(tmpNum);
				}
				this.rowLen = rowLen;
				return tempArr;
			},
		},
		methods: {
			currentIndex: function(j) {
				var indexArr = this.indexArr;
				var n = indexArr[j];
				if (indexArr[j] + 1 >= this.numArr[j]) {
					indexArr[j] = 0;
				} else {
					indexArr[j]++;
				}
				this.indexArr = indexArr;
				return n;
			}
		},
	});
</script>
</body>
</html>