vue竖向表格 - 利用element实现解决纵向循环仿表格布局

最新推荐文章于 2025-02-11 10:25:43 发布

原创

最新推荐文章于 2025-02-11 10:25:43 发布 · 4.5k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #es6 #前端 #css3

本文介绍了如何利用Element UI在Vue中创建一个竖向显示数据的表格，支持动态渲染表头和分组，展示了实现效果。

实现效果图
在这里插入图片描述
需求是完成纵向显示数据，支持表格分组、表头数据均可动态渲染

<template>
    <div class="box">
        <div class="tableHead">
            <template v-for="(i,j) in tableHead">
                <el-row :key="j">
                    <el-col :span="i.children ? 12 : 24" :style="i.children ? extent(i.children) : 'height:50px'">{
   
   {
   
   i.name}}</el-col>
                    <el-col v-if="i.children" :span="12">
                        <template v-for="(g,k) in i.children">
                            <el-row :key="k">{
   
   {
   
   g.name}}</el-row>
                        </template>
                    </el-col>
                </el-row>
            </template>
        </div>
        <div class="tableBody">
            <template v-for=

最低0.47元/天解锁文章