vue+element实现表格跨行或跨列合并

神机军师
• 阅读 48592

前言

vue+element用于pc后台管理系统比较多,所以后台管理系统一般以处理数据为主,数据结构的复杂程度变高,相对应的前端展示成本也提高,
有些产品经理或许会要求表格跨行或跨列合并,如果你正在想怎么实现,那就接着往下看
最新封装了一个表格合并和编辑插件:vue-split-table,戳一戳
效果图
vue+element实现表格跨行或跨列合并

element的2.x

(注意是2.X新加的方法)

1.span-method方法

可以实现合并行或列，

2.参数

方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

3.函数的返回数组

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置
          if (columnIndex === 0) {//判断条件可以设置成你想合并的列的起始位置
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
         }
    }
 },

4.返回对象

return [1,2]也可以返回一个对象

return {
rowspan: 2,//实际上就是给td加上rowspan属性
colspan: 1//实际上就是给td加上colspan属性
};

5.贴上一个完整代码,可以直接拿去演示

<template>
  <div>
    <el-table
      :data="tableData6"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="数值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="数值 3">
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData6"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData6: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        console.log(row,column)
        if (row.id=='12987122') {
          if (columnIndex === 0) {
            return [2, 2];
          } 
          else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  };
</script>

原生方法一(最简单实现td单元格拆分)

1.原理分析

直接在对应的td里面嵌套<table>的<tr>让后台对应返回一个数组,遍历即可实现单元格拆分

强烈推荐方法二,这个实现成本最低,也便添加复选框进行增删改查

2.贴上一个demo

直接可以演示

<table class="ground-route-table">
    <thead>
      <tr>
        <td>城市</td>
        <td>美食</td>
        <td>好玩的地方</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>北京</td>
        <td>北京烤鸭</td>
        <td>
            <table  class="ground-route-table-small">
                <tr>故宫</tr>
                <tr>颐和园</tr>
                <tr>长城</tr>
            </table>
        </td>
      </tr>
    </tbody>
  </table>
  <style>
    .ground-route-table,
.ground-route-table-samll {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-collapse: collapse;
}
.ground-route-table td{
  border: 1px solid #dfe6ec;    
  }
  </style>

原生方法二

属性colspan和rowspan实现合并行或列

1.原生的作用

可能有些项目是使用的element1.x版本,如果突然升级风险太高,我做这个就是,所以还是利用原生的table
的colspan和rowspan

2.实现难点

原生的难点在于table都是通过循环产生的,如果直接通过设置类设置样式,这样表格就会变乱,因为v-for下面每个td都创建了,所以要在v-for里面进行判断

3.那么问题来了?

colspan和rowspan的数据是应该是动态的,那么他们怎么动态绑定呢,可能会想到操作DOM,
但是这不是最好的方法,我们可以通过自定义指令将属性与值关联起来

4.自定义指令

mergerows: {
    // 指令的定义
    inserted: function (el) {
      el.setAttribute('rowspan',3)
    }
  }

贴上详解:https://cn.vuejs.org/v2/guide...

5.小插曲

很高兴你还能看到这里,有啥问题可以一起交流,如果觉得有点用,可以先收藏起来呢

6.贴上代码

    <template>
<table class="ground-route-table">
    <thead>
      <tr>
        <td>城市</td>
        <td>班次编码</td>
        <td>车辆编码</td>
        <td>顺序</td>
        <td>装车点</td>
        <td>到车点</td>
        <td>最晚到达时间</td>
        <td>发车时间</td>
        <td>到车时间</td>
        <td>OMP配载代码</td>
        <td>工作日</td>
        <td>线路类型</td>
        <td>线路类型</td>
        <td>资源类型</td>
        <td>车牌号</td>
        <td>司机ID</td>
        <td>司机姓名</td>
        <td>司机电话</td>
        <td>路线执行日期</td>
      </tr>
    </thead>

    <tbody>
      <tr v-for="(routeList,index) in groundRouteDataEnd" :key="index">
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8"><el-checkbox></el-checkbox></td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute1}}</td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute2}}</td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute3}}</td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute4}}</td>
        <td>{{routeList.groundRoute5}}</td>
        <td>{{routeList.groundRoute6}}</td>
        <td>{{routeList.groundRoute7}}</td>
        <td>{{routeList.groundRoute8}}</td>
        <td>{{routeList.groundRoute9}}</td>
        <td>{{routeList.groundRoute10}}</td>
        <td>{{routeList.groundRoute11}}</td>
        <td>{{routeList.groundRoute12}}</td>
        <td>{{routeList.groundRoute13}}</td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">
          <el-button type="primary" size="mini">查看</el-button>
        </td>
      </tr>
    </tbody>
  </table>
    
</template>
<script>
export default {
  data() {
    return {
      groundRouteDataEnd: [
        {
          groundRoute1: "10",
          groundRoute2: "10",
          groundRoute3: "10",
          groundRoute4: "10",
          groundRoute5: "10",
          groundRoute6: "10",
          groundRoute7: "10",
          groundRoute8: "10",
          groundRoute9: "10",
          groundRoute10: "10",
          groundRoute11: "11"
        },
        {
          groundRoute1: "10",
          groundRoute2: "10",
          groundRoute3: "10",
          groundRoute4: "10",
          groundRoute5: "10",
          groundRoute6: "10",
          groundRoute7: "10",
          groundRoute8: "10",
          groundRoute9: "10",
          groundRoute10: "10",
          groundRoute11: "11"
        },
        {
          groundRoute1: "10",
          groundRoute2: "10",
          groundRoute3: "10",
          groundRoute4: "10",
          groundRoute5: "10",
          groundRoute6: "10",
          groundRoute7: "10",
          groundRoute8: "10",
          groundRoute9: "10",
          groundRoute10: "10",
          groundRoute11: "11"
        },
        {
          groundRoute1: "10",
          groundRoute2: "40",
          groundRoute3: "10",
          groundRoute4: "10",
          groundRoute5: "10",
          groundRoute6: "10",
          groundRoute7: "10",
          groundRoute8: "10",
          groundRoute9: "10",
          groundRoute10: "10",
          groundRoute11: "11"
        }
      ]
    };
  },
  directives: {
    mergerows: {
      // 指令的定义
      inserted: function(el) {
        el.setAttribute("rowspan", 3);
      }
    }
  }
};
</script>
  <style scoped>
.ground-route-table,
.ground-route-table-samll {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-collapse: collapse;
}
.ground-route-table td{
  border: 1px solid #dfe6ec;    
  }
</style>
element
点赞
收藏
评论区
推荐文章
blmius blmius
•
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
5402
0
0
Wesley13 Wesley13
•
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
2111
0
0
美凌格栋栋酱 美凌格栋栋酱
•
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
2054
0
0
Easter79 Easter79
•
3年前
vue+element 表格formatter数据格式化并且插入html标签
前言　　　vue中element框架，其中表格组件，我既要行内数据格式化，又要插入html标签一贯思维，二者不可兼得也一、element表格数据格式化　　!(https://oscimg.oschina.net/oscnet/3c43a1cb3cbdeb5b5ad58acb45a42612b00.p
1667
0
0
helloworld_34035044 helloworld_34035044
•
3年前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为
1704
0
0
Stella981 Stella981
•
3年前
Spark DataFrame列的合并与拆分
版本说明：Spark2.3.0使用SparkSQL在对数据进行处理的过程中，可能会遇到对一列数据拆分为多列，或者把多列数据合并为一列。这里记录一下目前想到的对DataFrame列数据进行合并和拆分的几种方法。1DataFrame列数据的合并例如：我们有如下数据，想要将三列数据合并为一列，并以“,”分割
2055
0
0
Stella981 Stella981
•
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法，以百度首页为例子。0.元素定位方法主要有：id定位：find\_element\_by\_id('')name定位：find\_element\_by\_name('')class定位：find\_element\_by\_class\_name(''
1164
0
0
Wesley13 Wesley13
•
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
1820
0
0
Stella981 Stella981
•
3年前
Excel中复杂跨行跨列数据
XSSFWorkbookwbnewXSSFWorkbook();//工作表XSSFSheetsheetwb.createSheet("车辆使用情况统计");XSSFCellStylestylewb.createCellStyle();style.setAlignment(XSSFCellStyle.ALIG
805
0
0
Wesley13 Wesley13
•
3年前
MySQL数据库行列互换
如有如下表格：           仓库库存表(inventory)仓库名称(name)仓库库存(stock)月份(month)A1001B2001C3001A10002B20002C30002行列互换为以下表格：仓库名字(name)一月
818
0
0
sum墨 sum墨
•
9个月前
《优化接口设计的思路》系列：第十一篇—表格的导入导出接口优化
在后端开发中，我们经常处理增删改查的接口，这些操作已经非常熟悉了。然而，有时产品经理会要求增加一个表格数据的导入和导出功能，让用户可以离线处理数据。这类操作也很常见，但处理起来不太简单。尽管一些前端表格组件可以直接实现这类功能，但往往不够灵活，因为前端的数据通常已经过处理。如果要获取原始数据，还是得依靠后端处理。
560
0
0
神机军师
神机军师
Lv1
阳春二三月，草与水同色。
文章
6
粉丝
0
获赞
0
热门文章
Just for fun——windows上的php-fpm
Magnet DVR Examiner 3.12.0 - 从监控系统 CCTV 和监控 DVR 恢复视频和元数据
成为一名 BI数据分析师需要具备这些能力
聊一聊限流、降级、熔断
什么是 Web 应用程序的 synthetic monitor