通过数据模板自动生成表格table

news2024/11/22 16:42:12

1.数据模板中的主要几个参数需要注意下(需要加样式可自由设置参数):

title:填入表格的内容

col:1,占一列,row: 3,占3行

align:center居中对齐,

pdL:14,padding-left:14,

bold:true,加粗

width100,表格宽度,

type:2匹配的名称与数值间距,比如说类型1:值填在相邻的格子里,类型2:填在第二个格子里,类型3:填第三个

isNotWrite: true跳过写入,与可写入的空格区分,

 2.数据模板:

                data:[

                    [

                    { title: '', col: 1, row: 3, width: 140, },

                    { title: '年份', col: 1, row: 1, width: 130, align: 'center', },

                    { title: '2022', col: 1, row: 1, width: 130, align: 'center', },

                    { title: '调查户姓名', col: 1, row: 1, width: 130, align: 'center', },

                    { title: '刘双新', col: 1, row: 1, width: 130, align: 'center', },

                ],

                [

                    { title: '规模', col: 1, row: 1, align: 'center', },

                    { title: '一般户', col: 1, row: 1, align: 'center', },

                    { title: '', col: 2, row: 1, },

                ],

                [

                    { title: '上年耕地面积(亩)', col: 1, row: 1, align: 'center', },

                    { title: '3.50', col: 1, row: 1, },

                    { title: '本年耕地面积(亩)', col: 1, row: 1, align: 'center', },

                    { title: '3.50', col: 1, row: 1, },

                ],

]

3.表格dom ,遍历数据模板生成表格

<table id="table" class="investigation-table-normal">

        <tr v-for="(item, index) in detailData" :key="index">

          <td

            v-for="(v, i) in item"

            :key="i"

            :rowspan="v.row"

            :colspan="v.col"

            :class="{ [v.class]: !!v.class }"

            :style="{

              width: v.width ? `${v.width}px` : '',

              paddingLeft: v.pdL ? `${v.pdL}px` : '',

              textAlign: v.align ? v.align : '',

              fontWeight: v.bold ? 'bold' : '',

            }"

          >

            {{ v.title }}

          </td>

        </tr>

      </table>

 4.表格效果:

5.数据插入表格:year和name为基础数据,value1中的是指标数据

setTableData(name = 'value1') {
            const res = {
                year: 2022,
                name: '周倡',
                value1: ['一般户', 3.1, 3.2]
            }
            this.data.forEach((item) => {
                item.forEach((v, i) => {
                    if (v.title === '年份' && res.year && v.isBasic) {
                        item[i + 1].title = res.year
                    }
                    if (v.title === '调查户姓名' && res.name && v.isBasic) {
                        item[i + 1].title = res.name
                    }
                    // 是否可填写并且有指标数据
                    if (
                        v.title === '' &&
                        !v.isNotWrite &&
                        res[name].length > 0 &&
                        !v.isBasic
                    ) {
                        v.title = res[name].shift()
                    }
                })
            })
        },

6.插入效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1006197.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PyTorch实战-实现神经网络图像分类基础Tensor最全操作详解(一)

目录 前言 一、PyTorch数据结构-Tensor 1.什么是Tensor 2.数据Tensor使用场景 3.张量形态 标量&#xff08;0D 张量&#xff09; 向量&#xff08;1D 张量&#xff09; 矩阵(2D张量) 3D 张量与高维张量 二、Tensor的创建 1. 从列表或NumPy数组创建 2. 使用特定的初始…

PCL 计算字符型ply文件的法向量

文章目录 ply格式计算法向量意义具体代码 ply格式 PLY&#xff08;Polygon File Format&#xff09;是一种用于存储三维模型数据的文件格式。在PLY文件中&#xff0c;法向量是指每个顶点或面片的法向量&#xff0c;用于描述表面的朝向和光照计算。 在PLY文件中&#xff0c;法…

springboot导出(POI)

POI官方文档 引入依赖 <!--POI--><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency><dependency><groupId>org.apache.poi</groupId&…

Spring Cloud Alibaba:Nacos服务治理平台

文章目录 什么是Nacos&#xff1f;使用Nacos进行服务注册与发现服务注册服务发现 负载均衡分析与拓展安全性性能监控日志记录 &#x1f389;欢迎来到架构设计专栏~Spring Cloud Alibaba&#xff1a;Nacos服务治理平台 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&…

学习笔记|矩阵按键控制原理|数值转化为键码|密码锁|STC32G单片机视频开发教程(冲哥)|第十四集:矩阵按键原理及实践

文章目录 1.矩阵按键是什么2.矩阵按键的控制原理3.矩阵按键程序的编写将数值转化为键码完整代码&#xff1a;demo.c&#xff1a;key.c:key.h: 密码锁&#xff08;简易版&#xff09;需求分析&#xff1a; 总结课后练习&#xff1a; 1.矩阵按键是什么 这个矩阵按键也是我们这个…

网上管理系统的分析及设计---应用UML建模

目 录 第1章 系统需求 第2章 需求分析 2.1 识别参与者 2.2 识别用例 2.3 用例的事件流描述 第3章 静态结构模型 3.1 定义系统对象 3.2 定义用户界面类 3.3 建立类图 第4章 动态行为模型 4.1 创建系统顺序图&#xff08;协作图&#xff09; 4.2 创建系统…

网络爬虫-----初识爬虫

目录 1. 什么是爬虫&#xff1f; 1.1 初识网络爬虫 1.1.1 百度新闻案例说明 1.1.2 网站排名&#xff08;访问权重pv&#xff09; 2. 爬虫的领域&#xff08;为什么学习爬虫 ?&#xff09; 2.1 数据的来源 2.2 爬虫等于黑客吗&#xff1f; 2.3 大数据和爬虫又有啥关系&…

Java低代码:jvs-list (子列表)表单回显及触发逻辑引擎配置说明

一、子列表【新增】表单默认回显主列表关联字段 子列表新增表单可使用表单回显配置&#xff0c;在新增表单中默认回显&#xff0c;如图效果 1、子列表中进入新增页面配置 2、切换到表单设置&#xff0c;选择回显设置&#xff0c;进入回显逻辑引擎。 3、在画布中拖入【对象变量…

记录一次对登录接口的性能测试

测试环境 客户端: win10 这里可以用linux,但没用,因为想直观查看结果。 被测环境:linux X86 4核CPU16G内存 被测接口:登录接口,没有做数据驱动。 场景设计 设置线程数19,持续时间5分钟,并用后端监听器监听结果,使用grafana+prometheus监控服务器资源。 测试执行 …

fabic如何将绘图原点移到画布中心

情况说明&#xff1a; fabic默认绘图原点为left&#xff1a;0&#xff0c;top&#xff1a;0 后端给我的内容是按照x&#xff0c;y返回的&#xff0c;需要将坐标系移到fabic画布的中心位置&#xff0c;找了下网上合适的砖&#xff0c;想一句命令直接设置&#xff0c;结果没有。…

二叉排序树(BST)的算法分析以及基本操作(结点的查询,插入,删除)

1.二叉排序树的定义 二叉排序树&#xff0c;又称二叉查找树&#xff08;BST&#xff0c;Binary Search Tree) 默认不允许两个结点的关键字相同。 1.二叉排序树的性质: 任意一棵二叉排序树的子树的结点大小都满足“左小右大”。 左子树上所有结点的关键字均小于根结点的关键…

廉价的全闪存雷电 NAS 折腾笔记:NUC9 操作系统踩坑

上一篇文章中&#xff0c;分享了关于低成本全闪存 NAS 的个人方案选择。 本篇文章&#xff0c;来聊聊硬件相关部分&#xff0c;以及软件的基础配置部分&#xff0c;也聊聊雷电组网的踩坑之旅。 写在前面 我使用的设备是 NUC9i5QNX&#xff0c;这台设备的硬件基础规格&#x…

【软件测试】selenium3

自动化测试的概念 自动化测试指软件测试的自动化&#xff0c;在预设状态下运行应用程序或者系统&#xff0c;预设条件包括正常和异常&#xff0c;最 后评估运行结果。将人为驱动的测试行为转化为机器执行的过程。 自动化测试就相当于将人工测试手段进行转换&#xff0c;让代码…

国产视觉检测设备崛起,以AI机器视觉及自研算法破解智造难题

机器视觉作为人工智能的前沿分支之一&#xff0c;被称为智能制造的“智慧之眼”&#xff0c;在工业领域中&#xff0c;能够代替人工完成识别、测量、定位、检测等工作&#xff0c;以实现对设备精密控制及产线智能化、自动化升级。 同时&#xff0c;深度学习和3D视觉的技术升级…

Java本地开发环境搭建

概述 Java语言是企业级应用软件开发语言&#xff0c;本文主要描述Java开发环境的搭建。 如上所示&#xff0c;TIOBE提供2023年9月份全球开发语言的排行榜&#xff0c;其中&#xff0c;Java排名第四&#xff0c;而Python已经跃升到第一位&#xff0c;因为&#xff0c;Python是人…

芯科蓝牙BG27开发笔记6-精简第一个程序

1. 这些IO的控制代码在哪里&#xff1f; 还是蓝牙点灯程序&#xff1a; 首先需要对pinout做一些精简&#xff1a; 为了简化工程&#xff0c;去掉了不必要的IO。 至于PTI接口是什么&#xff0c;怎么用&#xff0c;不知道&#xff0c;现在不考虑&#xff1a; 但是提出以下问题…

第6章_freeRTOS入门与工程实践之创建FreeRTOS工程

本教程基于韦东山百问网出的 DShanMCU-F103开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id724601559592 配套资料获取&#xff1a;https://rtos.100ask.net/zh/freeRTOS/DShanMCU-F103 freeRTOS系列教程之freeRTOS入…

应该下那个 ActiveMQ

最近在搞 ActiveMQ 的时候&#xff0c;发现有 2 个 ActiveMQ 可以下载。 应该下那个呢&#xff1f; JMS 即Java Message Service&#xff0c;是JavaEE的消息服务接口。 JMS主要有两个版本&#xff1a;1.1和2.0。 2.0和1.1相比&#xff0c;主要是简化了收发消息的代码。 所谓…

Redis——其他数据类型介绍

概要介绍 Redis中有10种不同的数据类型。之前的blog中介绍了Redis中常见的五大数据类型&#xff1a;String&#xff0c;List&#xff0c;Hash&#xff0c;Set&#xff0c;ZSet。而Redis中还有许多其他的数据类型&#xff0c;一般在特定的场景中使用 Stream 首先介绍一下什么…

笔记本多拓展出一个屏幕

一、首先要知道&#xff0c;自己的电脑有没有Type-c接口&#xff0c;支持不支持VGA 推荐&#xff1a; 自己不清楚&#xff0c;问客服&#xff0c;勤问。 二、显示屏与笔记本相连&#xff0c;通过VGA 三、连接好了&#xff0c;需要去配置 网址&#xff1a;凑合着看&#xff…