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;
  }
}
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀11 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce12 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript