多表格合成，前端表格 套娃

ELEMENT - TABLE

使用了element > <el-table>组件。

此实现是参考 订单来了 某一模块 感觉像是套娃。

• 复制 - 粘贴到有有element项目的脚手架里便可。

• 放入报错了？ 可能 <style lang="scss"></style>把lang="scss"去掉即可。

<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>{{$route.name}}</el-breadcrumb-item>
		</el-breadcrumb>
		<div>
			<p @click="addRule">新增规则</p>
			<input v-model="input">
			<ul>
				<li v-for="(i,index) in list" style="border:1px solid red;" :key='index'>
					{{i.name}}
					<input v-model="inputCh" />
					<p @click="addRuleVal(i)">新增</p>
					<ul>
						<li v-for="(item,idx) in i.list" :key='idx'>
							{{item.value}}
						</li>
					</ul>
				</li>
			</ul>
			<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
				<el-table-column v-for="(i,index) in tableHeader" :key="index" :prop="i.con" :label="i.name" />
				<el-table-column label="测试内容">
					<template slope-scope="scope">
						<el-input type="text" placeholder="请输入内容" />
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: "table",
		data() {
			return {
				tableHeader: [], //表格头部
				tableData: [], //表格渲染
				tableShowRule: {}, // 表格展示规则
				list: [], // 新增规则
				input: '', //新增规则名称
				inputCh: '', //规则内容
				num: 0, //不可逆的数字
			}
		},
		watch:{
			tableData(res){
				console.log('tableData',res)
			},
			aa(res){
				console.log("aa",res)
			}
		},
		methods: {
			addRule() { //新增规格
				this.list.push({
					name: this.input,
					list: []
				})
				this.input = '';
				this.TbHeader();// 渲染表头
			},
			addRuleVal(i) { //新增规格值
				this.list.forEach(item => {
					if (item.name == i.name) {
						item.list.push({value: this.inputCh});
					}
				})
				this.inputCh = '';
				this.createContent() ; 
			},
			TbHeader() {
				this.tableHeader.push({
					name: this.list[this.list.length - 1].name,
					con: 'a' + this.num
				})
				this.num = Number(this.num) + 1
			},
			// 渲染字段
			createContent() {
				let list = []
				this.list.forEach(item => {
					list.push(item.list.map(ite => ite.value))
				})
				let list2 = this.tableArraySort(list);
				let list3 = []
				list2.forEach(item => {
					let aa = item.split('--')
					list3.push(aa)
				})
				let list4 = []
				list3.forEach(item => {
					let obj = {
						input:""
					}
					item.forEach((ite, idx) => {
						this.$set(obj, 'a' + idx, ite)
					})
					list4.push(obj)
				})
				this.tableData = list4
				this.getSpanArr1(this.tableData)
			},
			tableArraySort(list) { //数组排列组合
				const JIONARRAY  = arr => {
					var len = arr.length;
					if (len >= 2) {
						var len1 = arr[0].length;
						var len2 = arr[1].length;
						var length = len1 * len2;
						var items = new Array(length);
						var index = 0;
						for (var i = 0; i < len1; i++) {
							for (var j = 0; j < len2; j++) {
								items[index] = arr[0][i] + "--" + arr[1][j];
								index++;
							}
						}
						var newArr = new Array(len - 1);
						for (var i = 2; i < arr.length; i++) {
							newArr[i - 1] = arr[i];
						}
						newArr[0] = items;
						return JIONARRAY(newArr);
					} else {
						return arr[0];
					}
				}
				return JIONARRAY(list)
			},
			objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				for (let a = 0; a < this.list.length - 1; a++) {
					if (columnIndex === a) {
						const _row = this.tableShowRule['spanArr' + columnIndex][rowIndex];
						const _col = _row > 0 ? 1 : 0;
						return {
							rowspan: _row,
							colspan: _col
						};
					}
				}
			},
			getSpanArr1(data) { //生成表格 规则
				for (let a = 0; a < this.list.length - 1; a++) {
					for (var i = 0; i < data.length; i++) {
						if (i === 0) {
							this.$set(this.tableShowRule, 'spanArr' + a, [])
							this.tableShowRule['spanArr' + a].push(1)
							this.$set(this.tableShowRule, 'pos' + a, 0)
						} else {
							// 判断当前元素与上一个元素是否相同（line为标记）
							if (data[i]['a' + a] === data[i - 1]['a' + a] && data[i]['a' + 0] === data[i - 1]['a' + 0] && (
									a > 0 ? (data[i]['a' + (a - 1)] == data[i - 1]['a' + (a - 1)]) : true)) {
								this.tableShowRule['spanArr' + a][this.tableShowRule['pos' + a]] += 1
								this.tableShowRule['spanArr' + a].push(0)
							} else {
								this.tableShowRule['spanArr' + a].push(1)
								this.tableShowRule['pos' + a] = i
							}
						}
					}
				}
			},

		}
	}
</script>
<style lang="scss" scoped>
</style>

最后生成