quasar框架下的多级表头

多级表头—quasar

1. 前一段时间,项目上遇到的需求 : 实现一些table多级表头.然而quasar框架下table比较弱,在做这个表头时候遇到些麻烦,便记录一下
2. 直接上代码

					//一级表头
					   <q-tr>
                          <q-th>
                            <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                          </q-th>
                          <q-th rowspan="2" align="center">编码</q-th>
                          <q-th rowspan="2" align="center">名称</q-th>
                          <q-th rowspan="2" align="center">不含税价</q-th>
                          <q-th rowspan="2" align="center">供应商</q-th>
                          <q-th rowspan="2" align="center">P结果</q-th>
                          <q-th rowspan="2" align="center">T结果</q-th>
                          <q-th colspan="2" align="center">R结论</q-th>
                          <div v-for="(item,index) in maxLength" style="display: contents">
                            <q-th colspan="11" align="center" style="border-right:1px solid #ccc">
                              第{{ index + 1 }}次报价
                            </q-th>
                          </div>
                        </q-tr>
                    //二级表头
                        <q-tr>
                          <q-th align="center">工程师</q-th>
                          <q-th align="center">SQE</q-th>
                          <div v-for="(item,index) in maxLength" style="display: contents">
                            <q-th align="center">到厂价</q-th>
                            <q-th align="center">原材料</q-th>
                            <q-th align="center">加工装配费</q-th>
                            <q-th align="center">废品</q-th>
                            <q-th align="center">期间费用</q-th>
                            <q-th align="center">利润</q-th>
                            <q-th align="center">物流费</q-th>
                            <q-th align="center">包装费</q-th>
                            <q-th align="center">开发费</q-th>
                            <q-th align="center">模具费</q-th>
                            <q-th align="center" style="border-right:1px solid #ccc">报价附件</q-th>
                          </div>
                        </q-tr>
                     //列表渲染
                     <template slot="body" slot-scope="props">
                      <q-tr
                        :props="props"
                      >
                        <q-td >
                          <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                        </q-td> 
                        <q-td :rowspan="props.row.supplierNum" v-if="props.row.supplierNum" key="sorCode" :props="props" >
                          {{ props.row.rfqItemEntity.matCode }}
                        </q-td>
                      	 ...
                        <q-td key="sqeTrStatus" :props="props" >
                          <q-chip v-if="props.row.rfqSupplierEntity.sqeTrStatus == 1" dense square color="positive">通过</q-chip>
                          <q-chip v-if="props.row.rfqSupplierEntity.sqeTrStatus == -1" dense square color="negative">不通过</q-chip>
                          <q-chip v-if="props.row.rfqSupplierEntity.sqeTrStatus == '' || props.row.rfqSupplierEntity.sqeTrStatus == null" dense square color="negative">N/A</q-chip>
                        </q-td>
                        <div v-for="item in props.row.listMap" style="display: contents">
                          <q-td key="totalPrice" :props="props">
                            {{ item.totalPrice }}
                          </q-td>
                          ...
                          <q-td key="mouldPrice" :props="props">
                            {{ item.mouldPrice }}
                          </q-td>
                          <q-td key="fileName" :props="props" style="border-right:1px solid #ccc">
                             <a href="javascript:;" class="text-primary" @click="downloadFile(item.fileId)">{{ item.fileName }}</a>
                          </q-td>
                        </div>
                      </q-tr>
                    </template>

3. table表头样式如下