表格头部合并，数据和表头中间插入合计和样式合并

最新推荐文章于 2024-06-25 13:35:46 发布

加油，前进

最新推荐文章于 2024-06-25 13:35:46 发布

阅读量189

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_63954739/article/details/137589879

版权

在做项目时其中一个页面要求和Excel格式一样的页面

html数据，大概写了几个案例如下

 <el-table v-loading="loading" :data="tableList" :span-method="mergeRow">
           //:span-method="mergeRow" 用于合并第一行
            <el-table-column label="序号" align="center" width="55" type="index">
                <template slot-scope="scope">
                       //判断在第一行插入数据
                    <div v-if="scope.$index == 0" label="" style="font-weight:bolder;">
                       合计</div> 
                     //第二行排序
                    <div v-else>{{ (scope.$index) }}</div>
                </template> 
            </el-table-column>
             <el-table-column label="名称" align="center" prop="systemName">
                <template slot-scope="scope">
                    <div v-if="scope.$index == 0"> 
                       
                    </div>
                  //第二行名称
                    <div v-else>{{ (scope.row.Name) }}</div>
                </template>
            </el-table-column>
           //表头费用的第一行
         <el-table-column :label="'总费用：'+amounttoList.sysBillingCombinSum+'(元)'" 
          align="center">
           //表头费用的第二行
               <el-table-column :label="amounttoList.month1" align="center">
            //表头费用的第三行
                  <el-table-column prop="NumNo1" label="数量" width="80"align="center">
                       <template slot-scope="scope">
                       //判断在第一行插入数据
                           <div v-if="scope.$index == 0" style="font- 
                                  weight:bolder;"> 
                                   合计
                            </div>
                            <div v-else>{{ (scope.row.NumNo1) }}</div>
                       </template>
                  </el-table-column>
               </el-table-column> 
            </el-table-column>
</el-table>

//第一行合并的样式  
mergeRow({ row, column, rowIndex, columnIndex}){
            /**
     * 当前行 row
     * 当前列 column
     * 当前行号 rowIndex
     * 当前列号 columnIndex
       colspan是跨列
       rowspan是跨行
     */
            if (rowIndex === 0) { // 判断当前行号
                    if(columnIndex == 3){//判断当前列号
                        return {
                        rowspan: 1, colspan: 3};
                    }
                    if (columnIndex == 4) { 
                        return {rowspan: 0, colspan: 0}
                    }
                    if (columnIndex == 5) { 
                    return {
                        rowspan: 0, colspan: 0}
                    }
                    if (columnIndex == 6) { 
                        return {rowspan: 1, colspan: 2}
                    }
                    if (columnIndex == 7) { 
                        return {rowspan: 0, colspan: 0}
                    }
                    if (columnIndex == 9) { 
                        return {rowspan: 1, colspan: 2}
                    }
                    if (columnIndex == 10) { 
                        return {rowspan: 0, colspan: 0}
                    }
                    if (columnIndex == 12) { 
                        return {rowspan: 1, colspan: 2}
                    }
                    if (columnIndex == 13) { 
                        return {rowspan: 0, colspan: 0}
                    }
                
            }
   
        },