table多行表头渲染时出现位置错乱问题
若你也是 表格跨行跨列在动态渲染时出现的表头位置错乱问题,可以直接看
PartThree
。
PartOne:问题展示
要做一个表格,表头的形式大概时这样的:
表头复杂吗?不复杂,就是在写的时候出现了一个大问题,首先不是UI框架
的原因,这里说明一下。
PS:当时的我不知道是不是UI
的原因,于是,我就是用原生的table
表格来写了,结果问题依旧。
什么问题呢,就是我构造了表头的数据,然后使用循环动态构建这个表头,结果,表头渲染出来是这样:
what?可以确认的是循环写的绝对是没问题,所以问题出在哪里呢?
PartTwo:问题原因
很明显,正常的表头绕不开rowspan
和colspan
,于是我原本写的大概是这样的:
<table>
<thead>
<tr>
<th rowspan="3">单位名称</th>
<th rowspan="3" colspan="2">岗位人员</th>
<th colspan="14">日期</th>
<th rowspan="3">出勤率</th>
</tr>
<tr>
<th colspan="2">01-04</th>
<th colspan="2">01-05</th>
<th colspan="2">01-06</th>
<th colspan="2">01-07</th>
<th colspan="2">01-08</th>
<th colspan="2">01-09</th>
<th colspan="2">01-10</th>
</tr>
<tr>
......
下面太长了,省略了。。。
</tr>
</thead>
</table>
基本形式就是这样,三行tr
,然后里面的th
跨行跨列营造效果。
当然写死肯定不行,于是构造了数据,根据表头构造出来的数据是这样的:
[
[
{ text: '单位名称', row: 3, col: 0 },
{ text: '岗位人员', row: 3, col: 2 },
{ text: '日期', row: 0, col: 14 },
{ text: '出勤率', row: 3, col: 0 },
],
[
{ text: '01-04', row: 0, col: 2 },
{ text: '01-05', row: 0, col: 2 },
{ text: '01-06', row: 0, col: 2 },
{ text: '01-07', row: 0, col: 2 },
{ text: '01-08', row: 0, col: 2 },
{ text: '01-09', row: 0, col: 2 },
{ text: '01-10', row: 0, col: 2 },
],
[
{ text: '上午', row: 0, col: 0 },
{ text: '下午', row: 0, col: 0 },
...省略
]
]
这渲染出来很正常吧,二维数组,先渲染出来三个tr
,然后在根据数组中的每一项渲染出对应的th
,并动态的绑定rowspan
和colspan
即可,然后你们也看到了,渲染出来就离了个大谱。
问题在哪呢:问题出在rowspan
和 colspan
这两个属性上,经过我的尝试,我发现了 一个问题,我正常写的时候,标签上如果不牵涉到跨行或跨列,我是没有写rowspan
和 colspan
属性的,但是我渲染出来dom
,为了数据的统一,我给每一个th都绑定了rowspan
和 colspan
属性。
但是:rowspan
和 colspan
属性不能随便绑定。
PartThree:解决方案
谨记:如果表格单元格不牵涉到跨行或者跨列,那么不要在标签上绑定colspan
和rowspan
属性,即使值为0也不行。
所以知道了这点就很简单了,无非就是在渲染时判断麻烦一点:
- 如果需要跨行,
rowspan
绑定上 - 如果需要跨列,
colspan
绑定上 - 如果需要跨行跨列,那就两个都绑定.
- 如果都不需要,那就不要绑定.
Tips:
- 这是我在
angualr
中发现的绑定
rowspan
和colspan
时,直接[]
绑定值不可以,需要变一下:<th [attr.rowspan]=" " [attr.colspan]=" "></th>