表格实现效果
主要属性
colspan=“5” //列合并5列rowspan=“5” //行合并5行
< div class = "table-wrapper" >
< div class = "table-head" >
< table>
< colgroup>
< col style= "width:60px;" / >
< col style= "width:70px;" / >
< col style= "width:70px;" / >
< template v- for = "item in 26" >
< col / >
< / template>
< / colgroup>
< thead>
< ! -- 第一行标题 -- >
< tr class = "firstTr" >
< td colspan= "53" > 1 < / td>
< / tr>
< ! -- 第二行统计时间 -- >
< tr class = "firstTr" >
< td colspan= "53" style= "text-align:left;" > 统计时间:2021 年11 月01 日-- 2021 年11 月02 日< / td>
< / tr>
< ! -- 第三行-- >
< tr class = "firstTr" >
< td rowspan= "4" > 序号< / td>
< td rowspan= "4" > 公司名称< / td>
< td rowspan= "4" > 1 < / td>
< td rowspan= "4" > 2 < / td>
< td colspan= "17" rowspan= "1" > 3 < / td>
< td colspan= "19" rowspan= "1" > 4 < / td>
< td colspan= "13" rowspan= "1" > 5 < / td>
< / tr>
< ! -- 第四行-- >
< tr class = "secondTr" >
< td colspan= "4" rowspan= "2" >
5
< / td>
< td colspan= "4" rowspan= "2" >
6
< / td>
< td colspan= "4" rowspan= "2" >
7
< / td>
< td colspan= "4" rowspan= "2" >
8
< / td>
< td rowspan= "3" >
合计
< / td>
< td colspan= "9" rowspan= "1" >
9
< / td>
< td colspan= "9" rowspan= "1" >
10
< / td>
< td rowspan= "3" >
合计
< / td>
< td colspan= "4" rowspan= "2" >
11
< / td>
< td colspan= "4" rowspan= "2" >
12
< / td>
< td colspan= "4" rowspan= "2" >
13
< / td>
< td rowspan= "3" >
合计
< / td>
< / tr>
< ! -- 第五行-- >
< tr class = "secondTr" >
< td colspan= "4" >
14
< / td>
< td colspan= "4" >
15
< / td>
< td rowspan= "2" >
16
< / td>
< td colspan= "4" >
17
< / td>
< td colspan= "4" >
18
< / td>
< td rowspan= "2" >
合计
< / td>
< / tr>
< ! -- 第六行-- >
< tr class = "secondTr" >
< template v- for = "item in 4" >
< td colspan= "1" >
提交
< / td>
< td colspan= "1" >
通过
< / td>
< td colspan= "1" >
退回
< / td>
< td colspan= "1" >
小计
< / td>
< / template>
< template v- for = "item in 7" >
< td colspan= "1" >
录入
< / td>
< td colspan= "1" >
通过
< / td>
< td colspan= "1" >
退回
< / td>
< td colspan= "1" >
小计
< / td>
< / template>
< / tr>
< / thead>
< / table>
< / div>
< div class = "table-body" >
< table>
< colgroup>
< col style= "width:60px;" / >
< col style= "width:70px;" / >
< col style= "width:70px;" / >
< template v- for = "item in 26" >
< col / >
< / template>
< / colgroup>
< tbody>
< tr v- for = "(item,index) in pqListData" : key= "index" : class = "{comTr: item.comFlag == '1'}" >
< template v- if = "item.xuhao==0" >
< td colspan= "3" > 合计< / td>
< / template>
< template v- else >
< td> { { item. xuhao} } < / td>
< ! -- arrIndex 为“峡谷”等公司名称在数组中第一次出现位置的索引 -- >
< ! -- getKeyCount方法返回“峡谷”等公司名称一共有几条数据进行行合并 -- >
< template v- if = "arrIndex.includes(index)" >
< td : rowspan= "getKeyCount('comname',item.comname)" > { { item. comname} } < / td>
< / template>
< td> { { item. opername} } < / td>
< / template>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< td> { { item. A } } < / td>
< / tr>
< tr v- if = "pqListData == ''" class = "nodata" >
< td colspan= "29" style= "text-align: center" > 暂无数据< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
methods:
getKeyCount ( key, value) {
let result = [ ] ;
for ( let [ index, elem] of this . pqListData. entries ( ) ) {
elem[ key] == value && result. push ( index)
}
return result. length
} ,
getListData ( ) {
let data = [ ... . . ]
let arr = [ "峡谷" , "峡谷A" , "峡谷B" ] ;
for ( let i = 0 ; i < arr. length; i++ ) {
let is = data. findIndex ( p=> p. comname == arr[ i] )
if ( is!== - 1 ) {
this . arrIndex. push ( is)
}
}
}