原本是用vue+element做前端的,因为业务需要，要一次性加载所有数据，发现用el-table很卡，于是改用原生table,话说，在性能，自由发挥上，还是原生的好，效果见下图
之前在另一公司遇到这种需求我是用两个table解决，但是，会有点问题。现在这公司比较严格，在于是百度，我选择了用一个table做这种效果，这样不会存在我以前做的时候了现的问题。
见代码，请忽略数据填充逻辑，主要靠css来完成这个想法。
<div class="monTbale-body">
<table v-loading="tableLoading" class="monTbale" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr style="background-color:#F0F0F0">
<th style="width: 90px">{
{ $t('attendance.memberName') }}</th>
<th v-for="index of monthDays" :key="'th_'+index" style="width: 30px">
{
{ index }}
<br />
{
{ ui_getWeekStr(index) }}
</th>
<th style="width: 100px">{
{ $t('attendance.needattendanceHours') }}</th>
<th style="width: 100px">{
{ $t('attendance.accuattendanceHours') }}</th>
<th style="width: 100px">{
{ $t('attendance.accumulatedLatenesshourstimes') }}</th>
<th style="width: 100px">{
{ $t('attendance.accumulatedEarlyLeavehourstimes') }}</th>
<th style="width: 100px">{
{ $t('attendance.timesOfCardShortage') }}</th>
<th>{
{ $t('attendance.accumulatedOvertimehours') }}</th>
</tr>
</thead>
<tbody>
<li v-if="tableData.length>0">
<tr v-for="(value, key, index) in tableData" :key="'data_'+index">
<td style="width: 90px;align:center"><a style="color:blue;" @click="evt_openMember(value)">{
{ value.memberName }}</a></td>
<td v-for="i of monthDays" :key="'td_'+i" class="d" style="width: 30px">
<div
v-if="value['state0_'+i]&&value['state0_'+i]>0"
style="background-color:red"
>X{
{ value['state0_'+i] }}</div>
<div
v-if="value['state2_'+i]&&value['state2_'+i]>0"
style="background-color:Magenta"
>L{
{ value['state2_'+i] }}</div>
<div
v-if="value['state3_'+i]&&value['state3_'+i]>0"
style="background-color:orange"
>E{
{ value['state3_'+i] }}</div>
<div
v-if="value['state0_'+i]==0&&value['state2_'+i]==0&&value['state3_'+i]==0"
style="background-color:green"
>√</div>
</td>
<td style="width: 100px">{
{ value.totalAttendance }}</td>
<td style="width: 100px">{
{ value.absenceNums }}</td>
<td style="width: 100px">{
{ value.arrNums }}/{
{ value.arrTime }}</td>
<td style="width: 100px">{
{ value.depNums }}/{
{ value.depTime }}</td>
<td style="width: 100px">{
{ value.cardNums }}</td>
<td>{
{ value.overTime }}</td>
</tr>
</li>
<li v-else>
<tr><td :colspan="monthDays+7">{
{ $t('common.querynodata') }}</td></tr>
</li>
</tbody>
</table>
</div>.monTbale {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
font-size: 0.6em;
text-align: center;
width: 100%;
tr {
display: table;
width: 100%;
table-layout: fixed;
word-wrap:break-word;word-break:break-all;
text-align:center;
vertical-align:middle;
th,td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
height: 40px;
}
}
.d{
font-size: 0.6em;
}
}
.monTbale tbody {
display: block;
height: 600px;
overflow-y: scroll;
}
.monTbale thead {
width: calc( 100% - 1em );
}我是参考了这位大兄的博客，在此感谢。