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 ...

随机推荐

go 学习笔记之是否支持以及如何实现继承
熟悉面向对象的小伙伴们可能会知道封装,继承和多态是最主要的特性,为什么前辈们会如此看重这三种特性,真的那么重要吗? 什么是封装什么是封装,封装有什么好处以及怎么实现封装? 相信大多数小伙伴们都有自己 ...
python之“装饰器”
在python里装饰器其定义:装饰器就是一个函数,用来装饰其他函数,就是给其他函数添加功能. 装饰器有两个特点: 1.装饰器不修改被装饰函数的源码: 2.装饰器不锈钢被装饰函数的调用方式. 在编程中 ...
驰骋工作流引擎与jFinal集成版本2.0
驰骋工作流引擎与jFinal集成版本2.0 发布说明关键字: 驰骋工作流程快速开发平台工作流程管理系统java工作流引擎. 使用协议:GPL. 关于JFinal: https://www.jfin ...
SharpMap V1.1 For Web教程系列之——地图展示
开篇先说本次的开发环境吧.采用Vs2010,.Net Framework 4.0. 为了更好的调试程序,建议在IIS中进行调试及运行,个人非常不喜欢利用VS自己提供的WebServer去调试程序,而且 ...
Codeforces 220C
题意略. 思路: 我们可以把 bi[ i ] 在 ai[ ] 中的位置记录下来,然后算出 i - mp[ bi[i] ] ,再将它压入一个multiset.每次我们就二分地来寻找离0最近的数字来作为答 ...
Leetcode之回溯法专题-37. 解数独（Sudoku Solver）
Leetcode之回溯法专题-37. 解数独(Sudoku Solver) 编写一个程序,通过已填充的空格来解决数独问题. 一个数独的解法需遵循如下规则: 数字 1-9 在每一行只能出现一次.数字 1 ...
HDU-6356 Glad You Came 线段树 ST表
HDU-6356 题意:有m次操作,每次操作通过给定的随机函数生成 l , r , v,使得在 l 到 r 区间内,所有的a[i]变为max(a[i] , v). 最后输出n个a[i]* i的异或和. ...
牛客多校第六场 C Generation I 组合数学阶乘逆元模板
链接:https://www.nowcoder.com/acm/contest/144/C来源:牛客网 Oak is given N empty and non-repeatable sets whi ...
codeforces 768 D. Jon and Orbs（概率dp）
题目链接:http://codeforces.com/contest/768/problem/D 题意:一共有k种球,要得到k种不同的球至少一个,q个提问每次提问给出一个数pi,问概率大小大于等于pi ...
‎Cocos2d-x 学习笔记(24) ParticleSystem ParticleSystemQuad
1. ParticleSystem ParticleData是存储粒子数据的类,ParticleSystem会关联一个ParticleData对象. ParticleSystem直接继承了Node.T ...

el-table合并行并自定义某一列或几列

el-table合并行并自定义某一列或几列的更多相关文章

随机推荐

热门专题