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>

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;
  }
}