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