在el-table的官方组件中并无看到具体的合并行或者列及自定义表格内容，因而就本身写了一个效果以下所示。
html
这种对左侧内容要求比较高，要求行合并，并要自定义一些内容。下面说一下具体方法及代码写法。spa
我这个表格自定义内容比较多因此本身用的时候能够按照本身的具体要求适当删改，修剪。code
<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">工商类业务销售金额</span></span> <span class="componyname" v-if="scope.$index==3"><i class="el-icon-plus"></i><span class="dataversion-tablist">知识产权类销售金额</span></span> <span class="componyname" v-if="scope.$index==4"><i class="el-icon-plus"></i><span class="dataversion-tablist">套餐类销售金额</span></span> <span class="componyname" v-if="scope.$index==5"><i></i><span class="dataversion-tablist">兼职会计产品销售金额</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">工商类业务退款金额</span></span> <span class="componyname" v-if="scope.$index==14"><i class="el-icon-plus"></i><span class="dataversion-tablist">套餐类销售退款</span></span> <span class="componyname" v-if="scope.$index==15"><i class="el-icon-plus"></i><span class="dataversion-tablist">知识产权类退款金额</span></span> <span class="componyname" v-if="scope.$index==16">兼职会计产品退款金额</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>
这是html的相关代码主要注意第一列内容htm
<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 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">工商类业务销售金额</span></span>
<span class="componyname" v-if="scope.$index==3"><i class="el-icon-plus"></i><span class="dataversion-tablist">知识产权类销售金额</span></span>
<span class="componyname" v-if="scope.$index==4"><i class="el-icon-plus"></i><span class="dataversion-tablist">套餐类销售金额</span></span>
<span class="componyname" v-if="scope.$index==5"><i></i><span class="dataversion-tablist">兼职会计产品销售金额</span></span>
...
</template>
</el-table-column>
在data中的return的数据就很简单了，没有没事特殊的，以下所示：
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, }... ] }
重要的是methods方法blog
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 } } }
首行的if (columnIndex === 0) {}是表示合并行的行为只在第一列进行。里面的就是自定义合并了if (rowIndex === 0) {}表示在第几行开始合并，ip
return { rowspan: 4, colspan: 1 }
表示合并几行。
要注意在html的表头里绑定了 :span-method="objectSpanMethod" 这种方法。不要漏掉就能够了。
只要将上面的代码复制到你须要的页面就能够达到合并行，及自定义列内容。
但愿对你有帮助，有问题的能够楼下留言。
原文出处：https://www.cnblogs.com/wzfwaf/p/11593522.html产品