table表格合并,循环渲染样式

效果

html

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

javascript 复制代码
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

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;
  }
}
相关推荐
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust3 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放3 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝4 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele5 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮5 小时前
【无标题】
开发语言·前端·javascript