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

最新推荐文章于 2024-10-04 18:08:24 发布

蜂巢糖FCT

最新推荐文章于 2024-10-04 18:08:24 发布

阅读量312

点赞数 1

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

本文链接：https://blog.csdn.net/qq_36093530/article/details/132848707

版权

本文介绍了数据模板中的关键参数设置，如样式、位置和内容类型，以及如何使用DOM遍历生成表格，并展示了如何基于基础数据插入指标数据到表格中。

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

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

title:填入表格的内容

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

align:center居中对齐,

pdL：14，padding-left:14,

bold:true,加粗

width：100，表格宽度，

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.插入效果：