vue 竖向纵向仿表格动态渲染表头表格根据id填充单元格

最新推荐文章于 2024-08-23 17:08:04 发布

self_challenge

最新推荐文章于 2024-08-23 17:08:04 发布

阅读量1.7k

点赞数

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

本文链接：https://blog.csdn.net/self_challenge/article/details/111354431

版权

本文介绍了如何使用Vue实现竖向仿表格布局，动态渲染表头，并根据ID填充单元格。通过调用后端提供的三个接口获取数据，前端进行数据拼接和渲染。使用nextTick确保DOM加载后进行操作，利用ref和HTMLCollection对象定位并填充特定单元格。

摘要由CSDN通过智能技术生成

在这里插入图片描述
关于布局这里不多说，上篇为此发过一篇，因需求布局稍微改动一下。移步至布局篇。如产品所说，一些数据是已封装好的，最后不要轻易动，既然这样、原本简单的需求必须由多接口返回数据，前端进行拼接并填充。后端提供3个接口供提取数据，分别是顶部任务对象，左侧树形结构，中间填充区域。

完整代码

<template>
    <div class="box">
          <div class="leftSide">
                <el-row>
                    <el-col :span="24" class="general">项目名</el-col>
                    <el-col :span="24" class="general">操作</el-col>
                    <el-col :span="24" class="general">问题数</el-col>
                </el-row>
                <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>
        <div class="rightSide">
            <div class="conceal">
                <div class="tableBody">
                	<template v-for="(i,j) in tableBody">
                    	<el-row :key="j" class="singleRow">
                        	<el-col :span="24" class="column">
                            	<div style="width:190px;" :class="i.name.length > 10 ? 'linHet' : ''">{
   {
   i.name}}</div>
                        	</el-col>
                        	<el-col :span="24" class="column">
                            	<div style="width:190px;">
                                	<i
                                    	class="el-icon-circle-check"
                                    	title="审核"
                                	></i>