跟普通的合并表格不同的是 这个表格数据的列头不固定…
<template>
<div>
<table>
<thead>
<th v-for="(item,index) in table.columns" :key="index" :style="'minWidth:'+ getThClass(index)+'px;' " :class="getThClass(index)">{{item}}</th>
</thead>
<tbody>
<template v-if="table.List.length<=0">
<tr class="noData">
<td :colspan="16">{{$t("noData")}}</td>
</tr>
</template>
<template v-for="tr of table.List">
<tr v-for="(item,index) of tr.items" :key="item.totalAmount">
<td v-if="index===0" :rowspan="tr.items.length">{{tr.date}}</td>
<td v-if="index===0" :rowspan="tr.items.length" :class="getTbClass(tr.totalAmount)">{{formatCurrency(tr.totalAmount)}}</td>
<template v-for="(value,j) in item">
<td v-if="table.columns.hasOwnProperty(j)" :key="j+'_'+item.totalAmount" :style="'minWidth:'+ getThClass(value)+'px;' " :class="getTbClass(value,j)">
<Tooltip :content="value" placement="bottom" id="courseName" v-if="j==='staffName2'||j==='staffName'||j==='name'">
<div class="breakAll">{{value}}</div>
</Tooltip>
<span v-else>{{typeof value==='number'?formatCurrency(value):value}}</span>
</td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
table:{
columns:[],
List:[]
}
}
}
直接上效果图