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 ...
随机推荐
- 在linux系统中配置NVMe over TCP
1. 准备环境 1.1 准备linux系统 要求的linux系统可以是运行在物理机上,也可以是虚拟机上: 建议有个linux系统,一个做host,一个做target,如果资源紧张也可以把host和ta ...
- js获取(包括中文）字符串长度与截取字符串
/** * @param begin 截取开始的索引 * @param num 截取的长度 */ //截取字符串(包括中文) function SetString(str, len) { var st ...
- python 实现多个线程间消息队列传递，一个简单的列子
#-*-coding:utf8-*-"""Producer and consumer models: 1. There are many producers and co ...
- three.js实现球体地球2018年全球GDP前十国家标记
概况如下: 1.SphereGeometry实现自转的地球: 2.THREE.Math.degToRad,Math.sin,Math.cos实现地图经纬度与三位坐标x,y,z之间的转换: 3.Imag ...
- 第二篇 特征点匹配以及openvslam中的相关实现详解
配置文件 在进入正题之前先做一些铺垫,在openvslam中,配置文件是必须要正确的以.yaml格式提供,通常需要指明使用的相机模型,ORB特征检测参数,跟踪参数等. #==============# ...
- Java NIO系列之[说在前面的话]
在开始这个系列文章之前,先聊一些题外话,说说我为什么要写Java NIO这个系列技术文章(不看完会错失一个亿的),因为Java NIO并不像JVM,中间件源码那么有吸引力,但这个技术点是java的基础 ...
- C#开发BIMFACE系列2 二次开发流程
系列目录 [已更新最新开发文章,点击查看详细] BIMFACE 平台是一个对外开放的平台,建筑行业的相关公司.软件公司或者有 BIM 业务需求的公司都可以注册成为开发者并使用其提供的强大功能. ...
- Python 命令行之旅：使用 argparse 实现 git 命令
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- PyTorch : torch.nn.xxx 和 torch.nn.functional.xxx
PyTorch : torch.nn.xxx 和 torch.nn.functional.xxx 在写 PyTorch 代码时,我们会发现一些功能重复的操作,比如卷积.激活.池化等操作.这些操作分别可 ...
- Educational Codeforces Round 44#985DSand Fortress+二分
传送门:送你去985D: 题意: 你有n袋沙包,在第一个沙包高度不超过H的条件下,满足相邻两个沙包高度差小于等于1的条件下(注意最小一定可以为0),求最少的沙包堆数: 思路: 画成图来说,有两种可能, ...