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

最新推荐文章于 2025-03-05 13:42:05 发布

self_challenge

最新推荐文章于 2025-03-05 13:42:05 发布

阅读量4.4k

点赞数 7

文章标签： javascript vue.js es6 前端 css3

本文链接：https://blog.youkuaiyun.com/self_challenge/article/details/111029179

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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