在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產品