el-table合並行並自定義某一列或幾列

在el-table的官方組件中並沒有看到具體的合並行或者列及自定義表格內容，於是就自己寫了一個效果如下所示。

 

 

這種對左側內容要求比較高，要求行合並，並要自定義一些內容。下面說一下具體方法及代碼寫法。

我這個表格自定義內容比較多所以自己用的時候可以按照自己的具體要求適當刪改，修剪。

<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的相關代碼主要注意第一列內容

<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" 這種方法。不要漏掉就可以了。
只要將上面的代碼復制到你需要的頁面就可以達到合並行，及自定義列內容。
希望對你有幫助，有問題的可以樓下留言。