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 ...
随机推荐
- 在github上搭建个人博客并在线更新
换博客比更博还勤的我终于决定写一篇博客搭建教程了.. FAQ Q:\(hexo\)需要本地编译.\(jekyll\)虽然可以直接上传\(md\)..但是如果在github上直接编译也太难受了叭,毕竟不 ...
- Linux设备驱动程序学习----3.模块的编译和装载
模块的编译和装载 更多内容请参考Linux设备驱动程序学习----目录 1. 设置测试系统 第1步,要先从kernel.org的镜像网站上获取一个主线内核,并安装到自己的系统中,因为学习驱动程序的编写 ...
- SSH开发模式——Struts2(第三小节)
struts2框架的知识点,虽然分了几个小节,感觉内容还是挺多的,但是你仅仅是入门了而已,想要进一步地提升自己,你得有一颗持之以恒的学习的心,最后的内容我都将在这篇博客中讲到,所以篇幅可能会有点长,希 ...
- 记录一则DG遭遇ORA-00088的案例
测试环境:RHEL 5.4 + Oracle 11.2.0.3 DG 现象:起初是在使用DG Broker进行switchover切换测试时,报错ORA-16775,提示有可能有数据丢失,不允许swi ...
- HOWTO: Avizo/Amira/Pergeos中如何利用Volume Edit
操作非常简单,就是利用Volume Edit取圆柱的同时可以取一个Mask(或称之为ROI,感兴趣区域,蒙板等) 如上图,利用Volume Edit取一个圆柱,然后点击Create Mask创建一个M ...
- Unity进阶：PlayMaker
版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...
- [转]Linux系统结构
Linux系统一般有4个主要部分:内核.shell.文件系统.应用程序. 内核.shell和文件系统一起形成了基本的操作系统结构,它们使得用户可以运行程序.管理文件并使用系统. 1.linux内核 内 ...
- Badboy录制模式
参考: http://leafwf.blog.51cto.com/872759/1109940 http://www.51testing.com/html/00/130600-1367743.html ...
- CF1028D Order book 思维
Order book time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- 杭电第四场 hdu6336 Problem E. Matrix from Arrays 打表找规律 矩阵前缀和（模板）
Problem E. Matrix from Arrays Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 ...