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 之os模块用法大全
Python的标准库中的os模块包含普遍的操作系统功能.这个模块的作用主要是提供与平台无关的功能.也就是说os模块能够处理平台间的差异问题,使得编写好的程序无需做任何改动就能在另外的平台上运行 这边给 ...
- 【改革春风吹满地 HDU - 2036 】【计算几何-----利用叉积计算多边形的面积】
利用叉积计算多边形的面积 我们都知道计算三角形的面积时可以用两个邻边对应向量积(叉积)的绝对值的一半表示,那么同样,对于多边形,我们可以以多边形上的一个点为源点,作过该点并且过多边形其他点中的某一个的 ...
- python 14 装饰器
目录 装饰器 1. 开放封闭原则 装饰器 1. 开放封闭原则 扩展是开放的,增加新的功能:修改源码(修改已经实现的功能)是封闭的. 在不改变源码及调用方式的前提下额外增加新的功能. # 版一: imp ...
- egret之红包满屏随意飘动
在做这个需求之前,我们假设屏幕上同时飘动的红包数最大为10 ) { let redBag = GameUtil.createBitmapByName("Red_bag_png"); ...
- HDU 6363
题意略. 思路: 这里有两个结论需要注意: 1.gcd(a ^ x - 1,a ^ y - 1) = a ^ gcd(x,y) - 1 2.gcd(fib[x],fib[y]) = fib[gcd(x ...
- spring-boot整合dubbo启动demo
参考资料: https://docs.spring.io/spring-boot/docs/2.1.7.RELEASE/reference/html/ https://github.com/apach ...
- spring-cloud-kubernetes背后的三个关键知识点
在<你好spring-cloud-kubernetes>一文中,对spring-cloud-kubernetes这个SpringCloud官方kubernetes服务框架有了基本了解,今天 ...
- Agentless监控实践中的预警指标采集
很多公司已经开发了监控解决方案,解决了指标收集.展示.预警发送等一系列问题. 本文介绍的监控解决方案由高性能时序数据库InfluxDB.时序分析监控工具Grafana及Agentless自动化工具An ...
- Jedis操作Redis--SortedSet类型
/** * SortedSet(有序集合) * ZADD,ZCARD,ZCOUNT,ZINCRBY,ZRANGE,ZRANGEBYSCORE,ZRANK,ZREM,ZREMRANGEBYRANK,ZR ...
- codeforce303C-Minimum Modular-剪枝，暴力
Minimum Modular 题意:就是在一堆数字中,每一个数字对m取模不能等于这堆数字中的其他数字,同时给了K个机会可以删除一些数字.求最小的m: 思路:我一开始完全没思路,队长说的并查集什么的不 ...