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: "",
name: "王小虎",
amount1: "",
amount2: "3.2",
amount3: ,
},
{
id: "",
name: "王小虎",
amount1: "",
amount2: "3.2",
amount3: ,
},
{
id: "",
name: "王小虎",
amount1: "",
amount2: "3.2",
amount3: ,
},
{
id: "",
name: "王小虎",
amount1: "",
amount2: "3.2",
amount3: ,
}...
]
}
重要的是methods方法
methods: {
objectSpanMethod({ rowIndex, columnIndex }) {
if (columnIndex === ) {
if (rowIndex === ) {
return {
rowspan: ,
colspan:
}
} else if (rowIndex === ) {
return {
rowspan: ,
colspan:
}
} else if (rowIndex === ) {
return {
rowspan: ,
colspan:
}
} else if (rowIndex === ) {
return {
rowspan: ,
colspan:
}
} else if (rowIndex === ) {
return {
rowspan: ,
colspan:
}
} else if (rowIndex === ) {
return {
rowspan: ,
colspan:
}
}else {
return {
rowspan: ,
colspan:
}
}
}else{
return
}
}
}
首行的if (columnIndex === 0) {}是表示合并行的行为只在第一列进行。里面的就是自定义合并了if (rowIndex === 0) {}表示在第几行开始合并，
return {
rowspan: 4,
colspan: 1
}
表示合并几行。
要注意在html的表头里绑定了 :span-method="objectSpanMethod" 这种方法。不要漏掉就可以了。
只要将上面的代码复制到你需要的页面就可以达到合并行，及自定义列内容。
希望对你有帮助，有问题的可以楼下留言。
el-table合并行并自定义某一列或几列的更多相关文章
- 使用element-ui 组件动态合并table的行/列（第二次修改）
这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题:现在将博客中错误的地方改过来,添加备注 文章需求:动态实现table表格中行/列的自动合并 使用框架及UI类库:Vue+Elemen ...
- js实现table合并相同列单元格
/** * Created with JetBrains WebStorm. * User: Johnny * Date: 18-3-26 * Time: 下午4:48 * Table td 相同值合 ...
- 9月6日表格标签（table、行、列、表头）（补）
一.<table> <table>代表表格标签. <table></table> 1.width 表示表格宽度,宽度表达方式有像素和百分比两种.网 ...
- Html table 合并单元格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- css table 合并单元格
1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...
- table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- 表格标签（table、行、列、表头）
表格标签 一.<table> <table>代表表格标签. <table></table> 1.width 表示表格宽度,宽度表达方式有像素和百分 ...
- table 合并行和列
table合并行列,以及拆分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
随机推荐
- python之“装饰器”
在python里装饰器 其定义:装饰器就是一个函数,用来装饰其他函数,就是给其他函数添加功能. 装饰器有两个特点: 1.装饰器不修改被装饰函数的源码: 2.装饰器不锈钢被装饰函数的调用方式. 在编程中 ...
- 《Java 8 in Action》Chapter 6：用流收集数据
1. 收集器简介 collect() 接收一个类型为 Collector 的参数,这个参数决定了如何把流中的元素聚合到其它数据结构中.Collectors 类包含了大量常用收集器的工厂方法,toLis ...
- Liunx学习总结(八)--服务
什么是服务 服务是向外提供服务的进程,一般来说都会放在后台,既然要持续不断的提供外界随时发来的服务请求,服务进程就需要常驻在内存中,且不应该和终端有关,否则终端退出服务程序就退出了.另外,要能够接待外 ...
- Github资源下载
自己收集的一些日常使用软件.编程书籍以及自己动手实践的程序,欢迎下载. 收集维护不易,喜欢请Star或Fork支持呀,(^-^)V. 所有资源均自己制作或收集自网络,如有侵权请联系删除. 友情链接 G ...
- gin-jwt对API进行权限控制
前言 之前文章简单介绍了如何运行gin+vue的前后端分离开源项目,该项目是学习了Gin实践教程后结合vue-element-admin写的,该教程讲得很详细,适合入门Gin.本篇文章将介绍gin+v ...
- CodeForces 1107 F Vasya and Endless Credits
题目传送门 题解: 需要注意到的是 每个offer都获益都是会随着时间的增加而渐少(或不变). 所以我们可以知道,最多在第n个月的时候这个人会买车离开. solve1:最优2分图匹配 我们可以把每个月 ...
- codeforces 233 C. Cycles（贪心+思维）
题目链接:http://codeforces.com/contest/233/problem/C 题意:在一个无相图中有N个长度为3 的回路,输出符合条件的图.注意此图的节点数不得超过100 题解:贪 ...
- lightoj 1111 - Best Picnic Ever（dfs or bfs）
题目链接 http://www.lightoj.com/volume_showproblem.php?problem=1111 题意:给你一个有向图再给你几个人的位置,问所有人可以在哪些点相聚. 简单 ...
- codeforces 807 C. Success Rate（二分）
题目链接:http://codeforces.com/contest/807/problem/C 题意:记 AC 率为当前 AC 提交的数量 x / 总提交量 y .已知最喜欢的 AC 率为 p/q ...
- CSS特效集锦：视觉魔法的碰撞与融合（二）
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...