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 ...
随机推荐
- **p，*p和&p使用有感
*p两种使用情况: 1.定义指针变量,如char *p:这里p是一个变量,单单在这一点上与int a 无差别:但p这个变量特殊在其中只能存地址. 引申:对于char **p,p中存一个地址add1,a ...
- python 13 内置函数2
目录 内置函数(二) 匿名函数 内置函数(三) 闭包 内置函数(二) abs() #返回绝对值--返回的是正数 enumerate("可迭代对象","序号起始值" ...
- python学习——字符串
1)字符串解释 字符串是python中常用的数据类型我们可以使用" "或' '来创建字符串. 2)字符串操作 """访问字符串中的值"&qu ...
- GCN和GCN在文本分类中应用
1.GCN的概念 传统CNN卷积可以处理图片等欧式结构的数据,却很难处理社交网络.信息网络等非欧式结构的数据.一般图片是由c个通道h行w列的矩阵组成的,结构非常规整.而社交网络.信息网络 ...
- 文件系统【图片处理】（基于thumbnailator）典藏版-壹
很多系统开发中都会碰到文件相关的处理,最近顺手开发一个小型文件系统的过程中碰到图片缩略图的需求,需要在显示的时候提供缩略图,下载的时候提供原图,大家直接想到的可能是java自带的图片处理类,但是处理过 ...
- SyntaxError: invalid syntax ： if not 0 <= time_low < 1<<32L:
报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/2.NLP/8.高阶实践/1.PipelineQ ...
- POJ 1182 食物链（经典并查集） （多组输入有时乱加也会错！）
多组输入有时乱加也会错! 这次用多组输入竟然,不用竟然对了,所以以后做题目,若是答案错误,先看加上或者删掉多组输入,看对不对 食物链 Time Limit: 1000MS Memory Lim ...
- Android-友盟第三方登录与分享
### 前言 最近项目中又一次需要集成友盟的三方登录与分享,之前没有记录过,所以这次来写一下... ### 准备工作 1.注册友盟账号创建应用,获取key:申请地址http://www.umeng.c ...
- CH 4302 Interval GCD 题解
题意 给定一个长度为N的数列A,以及M条指令 (N≤5* 10^5, M<=10^5),每条指令可能是以下两种之一: "C l r d",表示把 A[l],A[l+1],-, ...
- html/css中相对定位relative和绝对定位absolute的用法
一.相对定位(position:relative) 1.相对定位:将盒子的position属性设置为relative:可通过left.top.right.bottom设置偏移量. 相对定位基础用法示例 ...