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之流程控制——if...else...
Python之流程控制--if...else... 一.流程控制假如把程序比做走路,那我们到现在为止,一直走的都是直路,还没遇到过分岔口.当遇到分岔口时,你得判断哪条岔路是你要走的路,如果我们想让程 ...
React项目升级遇到的问题复盘(2019-09-02)
老铁们,发没发现我换了个贼帅的头像,高端大气上档次,非洲大地我最凶!可把我自己牛逼坏了. 不扯啦不扯啦,抓紧进入今天的正题,从今天开始我会每天写一下每天工作的出现的问题,主要对这些问题出现的原因,以及 ...
在.net core web网站中添加webSocket支持
注意:前置条件,操作系统 windows 8 以上,IIS Express 8.0 以上. 第1步:在Startup.cs文件的头部添加如下引用: using System.Net.WebSocket ...
softRestTemplate 2
@SuppressWarnings("unchecked") public User getUser(String id,String name) { Soft ...
Keras（二）Application中五款已训练模型、VGG16框架解读
Application的五款已训练模型 + H5py简述 Keras的应用模块Application提供了带有预训练权重的Keras模型,这些模型可以用来进行预测.特征提取和finetune. 后续还 ...
51nod 1376 最长递增子序列的数量（不是dp哦，线段树 + 思维）
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1376 题解:显然这题暴力的方法很容易想到就是以每个数为结尾最 ...
Navicat Premium基本使用
Navicat Premium基本使用转自:https://blog.csdn.net/Yangchenju/article/details/80633055 Navicat Premium基本使用 ...
Could not delete D:/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp1/wtpwebapps/platform/WEB-INF/lib
再把之前的maven工程删掉时,出现了如下错误: Could not delete D:/workspace/.metadata/.plugins/org.eclipse.wst.server.cor ...
Tomcat9控制台中文乱码的解决方案
1.网上大部分都是这种方法注释掉 tomcat 9 安装目录下的conf里的 logging.properties 找到 java.util.logging.ConsoleHandler.encod ...
Istio 1.3 发布，HTTP 遥测不再需要 Mixer
原文链接:Istio 1.3 发布,HTTP 遥测不再需要 Mixer Istio 是 Google.IBM 和 Lyft 联合开源的服务网格(Service Mesh)框架,旨在解决大量微服务的发现 ...

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

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

随机推荐

热门专题