table表格合并，循环渲染样式
效果
html
<table><!-- 标题 --><tr><th colspan="100"><el-input style="width: 300px;" v-model="paymentForm.name"></el-input></th></tr><!-- 栏目 --><tr><th colspan="2"></th><th :colspan="item.child.length" v-for="item, i in paymentForm.titleX" :key="i">{{ item.name }}</th></tr><tr><th colspan="2">摘要</th><template v-for="item, i in paymentForm.titleX" :key="i"><th v-for="item, k in item.child" :key="k">{{ item }}</th></template></tr><!-- 数据内容 --><template v-for="item, i in paymentForm.titleY" :key="i"><!-- 单行展示 --><tr v-show="!item.child" class="red"><td colspan="2">{{ item.name }}</td><td v-for="arr, index in item.arr" :key="index"><el-input v-model="item.arr[index]"></el-input></td></tr><!-- 多行展示 --><tr v-for="item2, k in item.child" :key="k" v-show="item.child.length"><td v-if="k == 0" :rowspan="item.child.length">{{ item.name }}</td><td v-if="item.child.length">{{ item2.name }}</td><td v-for="arr, index in item2.arr" :key="index"><el-input v-model="item2.arr[index]"></el-input></td></tr></template>
</table>js
let paymentForm = ref({name: "账户变动情况",titleX: [{ name: '账号1', child: ['基本户建行', '一般户工行1', '一般户工行2', '一般户民生', '农商', '民生', '支付宝'] },{ name: '账号2', child: ['基本户', '支付宝'] },{ name: '账号3', child: ['基本户', '支付宝'] },],titleY: [{ name: '昨日结余', arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{name: '收入',child: [{ name: "订单回款", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{ name: "利息", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{ name: "其他", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] }]},{ name: '收入合计', arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{name: '支出',child: [{ name: "工资", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{ name: "社保", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{ name: "还款", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{ name: "其他", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] }]},{ name: '支出合计', arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{ name: '本日余额', arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] },{ name: '合计', arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,] }]
})css
table {width: 100%;border: 1px solid #ccc;text-align: center;border-collapse: collapse;:deep(.el-input, .el-select, .el-range-editor .el-input__wrapper) {width: 100%;border: none !important;}:deep(.el-input__wrapper) {box-shadow: none !important;}tr {th {padding: 5px 0;border: 1px solid #ccc;text-align: center;min-width: 70px;}td {padding: 5px 0;border: 1px solid #ccc;text-align: center;min-width: 90px;}}.red {color: red;font-weight: 700;}
}