el-table合并行并自定义某一列或几列

在el-table的官方组件中并没有看到具体的合并行或者列及自定义表格内容，于是就自己写了一个效果如下所示。

这种对左侧内容要求比较高，要求行合并，并要自定义一些内容。下面说一下具体方法及代码写法。

我这个表格自定义内容比较多所以自己用的时候可以按照自己的具体要求适当删改，修剪。

<el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        stripe
        @current-change="handleCurrentChange"
        style=" 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的相关代码主要注意第一列内容

<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方法

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) {}表示在第几行开始合并，

return {
            rowspan: 4,
            colspan: 1
          }
表示合并几行。
要注意在html的表头里绑定了 :span-method="objectSpanMethod" 这种方法。不要漏掉就可以了。
只要将上面的代码复制到你需要的页面就可以达到合并行，及自定义列内容。
希望对你有帮助，有问题的可以楼下留言。