因项目需要，头部和列的第一行需要合并2行和3行，日期一列展示 一条数据，作者没想出什么好办法，希望有大佬提个意见怎么写的更简洁
这里就需要用到 colspan 和 rowspan
colspan 占用列格数
rowspan 占用行格数
接下来我们主要讲解 下面table的实现方式：
直接上代码 分析：这里为什么要写 2个 table ，是因为当滚动条出现的时候 表头和表格宽度会不一致，因为滚动条占用了tbody的宽度
<div class="view-box">
<div>
<table class="head-box" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="col-1" colspan="2">日期</th>
// 这里为什么要 这么写 循环 ，因为公司 需求是 每日数据一列展示，目前个人想到的是 这么写，希望有大神 可以指点一下 怎么才能 更方便有效
<th class="col-2" v-for="(item,index) of traderData" :key="index">{{item.arrangeDate}}</th>
</tr>
</thead>
</table>
</div>
<div class="sheet-parent parent-box" v-loading="tableOneLoading">
<table class="content-box" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!--数据插入处-->
<tr>
<th class="col-1" colspan="2">资金室点前台</th>
<td :style="index==0?'background:#fcf8e3':''" class="col-2" v-for="(item,index) of traderData" :key="index">{{item.capitalRoomFrontDesk}}</td> // 这段style绑定（第一列 黄色背景） 可以忽略
</tr>
<tr>
<th class="col-1" colspan="2">报价录入</th>
<td :style="index==0?'background:#fcf8e3':''" class="col-2" v-for="(item,index) of traderData" :key="index">{{item.quoteInput}}</td>
</tr>
<tr>
<th rowspan="2" style="vertical-align: middle;width:120px;">新券信息录入</th>
<th>中票 短融 利率 次级债 地方债</th>
<td :style="index==0?'background:#fcf8e3':''" class="col-2" width="120" v-for="(item,index) of traderData" :key="index">{{item.mediumTerm}}</td>
</tr>
<tr>
<th>企业债 公司债 超短 ABS</th>
<td :style="index==0?'background:#fcf8e3':''" class="col-2" v-for="(item,index) of traderData" :key="index">{{item.corporateDebt}}</td>
</tr>
省略的代码，其实跟上面的差不多，大家复制改改就行，3行合并的 就用 rowspan = "3" 就可以了。
<tr>
<th colspan="2" style="vertical-align: middle;">邮件发送</th>
<td :style="index==0?'background:#fcf8e3':''" class="col-2" v-for="(item,index) of traderData" :key="index">{{item.sendMail}}</td>
</tr>
</tbody>
</table>
</div>
</div>
data(){
return{ // 数据返回 数组JSON格式
traderData:[{
id:1,
arrangeDate: "2020-03-23"
capitalRoomFrontDesk: null
sendMail: null
}]
}
}
CSS代码：
/***table***/
.view-box{height:100%;}
.view-box table{width:100%;}
.view-box table tr td,.view-box table th{
border-bottom: 1px solid #dcdfe6;
padding: 10px;
text-align:center;
}
/***表主体父元素***/
.sheet-parent{max-height:calc(50vh-149px);overflow:auto;} // 这里的高度 因为 项目是 上下 2块，所以 用了 50vh （减去149px 是因为tbody距离浏览器的高度）
/***表头/表主体table列宽***/
.view-box .col-1{width:20%;}
.view-box .col-2{width:12%;}
JS代码：// 表主体高度超出父元素高度(出现滚动条)则将表头table宽度设置等于表主体宽度
window.onresize = function() {
var parentHeight=$(".parent-box").height();
var contentHeight=$(".content-box").height();
var contentWidth=$(".content-box").width();
if(contentHeight>parentHeight){
$(".head-box").width(contentWidth);
}
})
网友评论