We did not see a particular row or column were combined and custom assembly in the official table contents of el-table, then a write their results are shown below.
On the left side of this content is relatively high, the requirements are consolidated, and to customize some of the content. Said the following about the specific methods, and code writing.
I have this table custom content more so when they used the proper pruning can according to their own specific requirements, pruning.
<el-table :data="tableData" :span-method="objectSpanMethod" border stripe @current-change="handleCurrentChange" style="width: 100%; margin-top: 20px" > <el-table-column label="" width="80px"> <template slot-scope="scope"> <span class="componyname" v-if="scope.$index<=5">销售金额</span> <span class="componyname" v-if="scope.$index<=10 && scope.$index>5">销售利润</span> <span class="componyname" v-if="scope.$index<=15 && scope.$index>10">退款金额</span> <span class="componyname" v-if="scope.$index<=19 && scope.$index>15">销售合同数</span> <span class="componyname" v-if="scope.$index==21">代账合同客户数</span> <span class="componyname" v-if="scope.$index==22">账套规模</span> </template> </el-table-column> <el-table-column label="" width="150px"> <template slot-scope="scope"> <span class="componyname" v-if="scope.$index==0" @click="tabtopshows(tableData[2])"><i class="el-icon-arrow-down" v-if="tabtopshow==true"></i><i class="el-icon-arrow-up" v-else></i><span class="dataversion-tabtop">销售总金额</span></span> <span class="componyname" v-if="scope.$index==1"><i class="el-icon-plus"></i><span class="dataversion-tablist">代账业务销售金额</span></span> <span class="componyname" v-if="scope.$index==2"><i class="el-icon-plus"></i><span class = " DataVersion-TabList " > BUSINESS class of business sales amount </ span> </ span> <span class = " componyname " V- IF = " scope. == $ index. 3 " > <I class = " EL-icon -plus " > </ I> <span class = " DataVersion-TabList " > IP-based sales amount </ span> </ span> <span class = " componyname " V- IF = " scope.$index==4"><i class= " EL-icon-PLUS " > </ I> <span class = " DataVersion-TabList " > amount of sales packages based </ span> </ span> <span class = " componyname " V- IF = " scope. $ == 5 index " > <i> </ i> <span class = " DataVersion-the TabList " > part-time accounting product sales amounted </ span> </ span> <span class = " componyname " V- IF = "scope.$index==6"><i class="el-icon-arrow-down"></i><span class="dataversion-tabtop">销售总利润（毛利）</span></span> <span class="componyname" v-if="scope.$index==7"><i class="el-icon-plus"></i><span class="dataversion-tablist">代账业务销售利润</span></span> <span class="componyname" v-if="scope.$index==8"><i class="el-icon-plus"></i><span class="dataversion-tablist">工商类业务销售利润</span></span> <span class="componyname" v-if="scope.$index==9"><i class="el-icon-plus"></i><span class="dataversion-tablist">套餐类销售利润</span></span> <span class="componyname" v-if="scope.$index==10"><i class="el-icon-plus"></i><span class="dataversion-tablist">知识产权类销售业务</span></span> <span class="componyname" v-if="scope.$index==11"><i class="el-icon-arrow-down"></i><span class="dataversion-tabtop">退款总额</span></span> <span class="componyname" v-if="scope.$index==12"><i class="el-icon-plus"></i><span class="dataversion-tablist">代账业务退款金额</span></span> <span class="componyname" v-if="scope.$index==13"><i class="el-icon-plus"></i><span class = " DataVersion-TabList " > BUSINESS type service refund amount </ span> </ span> <span class = " componyname " V- IF = " scope. $ index == 14 " > <I class = " EL- PLUS-icon " > </ I> <span class = " DataVersion-TabList " > sales packages based refund </ span> </ span> <span class = " componyname " V- IF = " scope.$index==15"><i class= " EL-icon-PLUS " > </ I> <span class = " DataVersion-TabList " > IP class refund amount </ span> </ span> <span class = " componyname " V- IF = " scope . $ index == 16 " > part-time accounting product refund amount </ span> <span class = " componyname " V- IF = " scope. $ index == 17 " > <i class = " EL-icon-arrow- Down "></i><span class="dataversion-tabtop">代账合同数</span></span> <span class="componyname" v-if="scope.$index==18"><i class="el-icon-plus"></i><span class="dataversion-tablist">新签代账合同数</span></span> <span class="componyname" v-if="scope.$index==19"><i class="el-icon-plus"></i><span class="dataversion-tablist">续费代账合同数量</span></span> <span class="componyname" v-if="scope.$index==20"><i class="el-icon-plus"></i><span class="dataversion-tablist">续费率</span></span> <span class="componyname" v-if="scope.$index==21"><i class="el-icon-arrow-down"></i><span class="dataversion-tabtop"><span class="dataversion-tablist">代账生效客户数</span></span></span> <span class="componyname" v-if="scope.$index==22"><i class="el-icon-arrow-down"></i><span class="dataversion-tabtop"><span class="dataversion-tablist">账套总数</span></span></span> </template> </el-table-column> <el-table-column prop="name" label="当日"></el-table-column> <el-table-column prop="amount1" label="同比"></el-table-column> <el-table-column prop="amount2" label="环比"></el-table-column> <el-table-column prop="amount3" label="当周"></el-table-column> <el-table-column label="当月" prop="id"> <template slot-scope="scope"> <span class="componyname">{{scope.row.id}}</span> </template> </el-table-column> <el-table-column label="当月MTD环比" prop="id"> <template slot-scope="scope"> <span class="componyname">{{scope.row.id}}</span> </template> </el-table-column> <el-table-column label="M-1月" prop="id"> <template slot-scope="scope"> <span class="componyname">{{scope.row.id}}</span> </template> </el-table-column> <el-table-column label="M-2月" prop="id"> <template slot-scope="scope"> <span class="componyname">{{scope.row.id}}</span> </template> </el-table-column> <el-table-column label="M-3月" prop="id"> <template slot-scope="scope"> <span class="componyname">{{scope.row.id}}</span> </template> </el-table-column> </el-table>
This is the html code for the main attention of the relevant contents of the first column
<Template slot-scope = "scope"> <span class = "componyname" V-IF = "scope. $ index <=. 5"> Sales Amount </ span> <span class = "componyname" V-IF = "scope . $ index <= 10 && scope . $ index> 5 "> sales profit </ span> <span class =" componyname "V-IF =" scope. $ index <= 15 && scope. $ index> 10 "> back the amount of money </ span> <span class = "componyname" v-IF = "scope. $ index <= 19 && scope. $ index> 15"> number of sales contracts </ span> <span class = "componyname" V- if = "scope. $ index == 21"> on behalf of the account number of the customer contract </ span> <span class = "componyname" v-IF = "scope. $ index == 22"> C sets the scale </ span> < / template>
and custom content of the second column
<el-table-column label="" width="150px">
<template slot-scope="scope">
<span class="componyname" v-if="scope.$index==0" @click="tabtopshows(tableData[2])"><i class="el-icon-arrow-down" v-if="tabtopshow==true"></i><i class="el-icon-arrow-up" v-else></i><span class="dataversion-tabtop">销售总金额</span></span>
<span class="componyname" v-if="scope.$index==1"><i class="el-icon-plus"></i><span class="dataversion-tablist">代账业务销售金额</span></span>
<span class="componyname" v-if="scope.$index==2"><i class = "el-icon- plus"> </ i> <span class = "dataversion-tablist"> BUSINESS class of business sales amount </ span> </ span>
IP-based sales amount </ span> </ span><span class = "componyname" V-IF = " scope. $ index == 3 ">
<span class = "componyname" v -if = "scope. $ index == 4"> <i class = "el-icon-plus"> </ i> <span class = "dataversion-tablist"> sales package type amount </ span> </ span>
<span class = "componyname" v-IF = "scope. $ index == 5"> <i> </ i> <span class = "DataVersion-the TabList"> part-time accounting products sales amount </ span> </ span>
...
</ Template>
</ EL-Table-column>
data in the return data in is very simple, no special right, as follows:
return { tableData: [ { id: "12987122", name: "王小虎", amount1: "234", amount2: "3.2", amount3: 10, }, { id: "12987122", name: "王小虎", amount1: "234", amount2: "3.2", amount3: 10, }, { id: "12987122", name: "王小虎", amount1: "234", amount2: "3.2", amount3: 10, }, { id: "12987122", name: "王小虎", amount1: "234", amount2: "3.2", amount3: 10, }... ] }
It is important methods method
methods: { objectSpanMethod({ rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex === 0) { return { rowspan: 6, colspan: 1 } } else if (rowIndex === 6) { return { rowspan: 5, colspan: 1 } } else if (rowIndex === 11) { return { rowspan: 6, colspan: 1 } } else if (rowIndex === 17) { return { rowspan: 4, colspan: 1 } } else if (rowIndex === 21) { return { rowspan: 1, colspan: 1 } } else if (rowIndex === 22) { return { rowspan: 1, colspan: 1 } }else { return { rowspan: 0, colspan: 0 } } }else{ return } } }
The first row if (columnIndex === 0) {} is a combined line acts only in the first column. Which is defined aggregates if (rowIndex === 0) {} indicates the start of the combined first few lines,
return { rowspan:. 4 , colspan:. 1 }
represents merge lines.
Pay attention to the table ahead of html bound: span-method = "objectSpanMethod" this approach. Do not miss it.
Just copy the above code to the page you need can reach merge row, column, and custom content.
I want to help you, downstairs in question can leave a message.