vue 动态合并表格

跟普通的合并表格不同的是 这个表格数据的列头不固定…

<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:[]
       }
     }
  }

直接上效果图