相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门

但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rowspan 的参数需要自己做判断,根据数据的相同行(或列)进行合并;

我们先看下结果:

代码附上:

 <template>
<div class="">
<el-table
:data="listData"
:span-method="objectSpanMethod"
class="tableArea"
style="width: 100%">
<el-table-column
prop="type"
label="序号"
align="center"
width="200"/>
<el-table-column
prop="sheetType"
label="工单类型"
/>
<el-table-column
prop="taskKey"
label="taskKey"
/>
<el-table-column
prop="templateUrl"
label="templateUrl"
/>
<el-table-column
label="操作"
>
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<i class="el-icon-edit-outline" @click="modify(scope)" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<i class="el-icon-delete" @click="deleteData(scope)" />
</el-tooltip>
</template>
</el-table-column >
</el-table>
</div>
</template>
<script> export default {
name: 'myNeedDeal',
data() {
return {
rowList: [],
spanArr: [],
position: 0,
listData: []
}
}, methods: {
queryData(){//查询操作
this.listData = [
{
id:1,
type:1,
sheetType: "事件单",
taskKey: "shijian_01",
templateUrl: "/shijian_01"
},
{
id:2,
type:1,
sheetType: "事件单",
taskKey: "shijian_02",
templateUrl: "/shijian_02"
},
{
id:3,
type:1,
sheetType: "事件单",
taskKey: "shijian_03",
templateUrl: "/shijian_04"
},
{
id:4,
type:2,
sheetType: "问题单",
taskKey: "wenti_01",
templateUrl: "/wenti_01"
},
{
id:5,
type:2,
sheetType: "问题单",
taskKey: "wenti_02",
templateUrl: "/wenti_02"
},
{
id:6,
type:2,
sheetType: "问题单",
taskKey: "wenti_03",
templateUrl: "/wenti_03"
}
];
this.rowspan()
},
rowspan() {
this.listData.forEach((item,index) => {
if( index === 0){
this.spanArr.push(1);
this.position = 0;
}else{
if(this.listData[index].type === this.listData[index-1].type ){
this.spanArr[this.position] += 1;
this.spanArr.push(0);
}else{
this.spanArr.push(1);
this.position = index;
}
}
})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
if(columnIndex === 1){
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
}
},
mounted() {
this.queryData();
}
}
</script>
<style lang="scss" scoped>
.el-select {
margin-right: 15px;
}
.el-input {
margin-right: 15px;
width: 200px;
}
.tableArea {
margin-top: 20px;
box-shadow: 0 0 8px 0 #aaa;
}
i[class^="el-icon"] {
margin-right: 5px;
font-size: 16px;
cursor: pointer;
}
.modify_table{
td{
padding: 10px ;
}
}
.item_title{
text-align: right;
}
</style>

详细说明:

:span-method="objectSpanMethod"  

这个是官方给定的绑定属性和对应的方法,objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }

row: 当前行

column: 当前列

rowIndex:当前行号

columnIndex :当前列号

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

this.spanArr 数组 ,返回的是相对应的行合并行数

这个示例打印出的this.spanArr为 [3, 0, 0, 3, 0, 0],比如,第一个元素为3,表示第一行应该向下合并3行(即第一行的rowspan为3),第二个元素的rowspan为0,就让它“消失”。

rowspan()这个函数就是用来返回 this.spanArr 数组的,定义每一行的 rowspan

rowspan()函数,if( index === 0),第一行,直接先给数组push进一个1,表示自己先占一行,this.position是数组元素的位置(此时是从数组元素的第一个开始,所以this.position为0), this.position为0意思表示的就是数组的第一个元素。

当到了index为2的时候,if(this.listData[index].type === this.listData[index-1].type ),让第二行与第一行作比较,

如果第二行与第一行相等的话,this.position就+1,当有n行第一行相同,this.position就为n,表示向下合并n行;第二行自己就this.spanArr.push(0),表示第二行“消失”,因为第一行和第二行合并了啊。

如果第二行与第一行不相等的话,那么this.spanArr.push(1);就让第二行自己独占一行;this.position = index意思就是把指针拿到index这行来,表示设置数组this.spanArr[this.position]的元素值,然后定义从此行开始向下合并几行(可能这句话我表述的不是很清楚你可以根据我这个示例研究下,当index为3时,this.position为3,当index为4时,第四行与第三行需要合并,那么在数组的this.position元素就要+1了,也就是this.spanArr[this.position] += 1)

还有最后一句话

const _col = _row>0 ? 1 : 0;

定义的这一个单元格列的合并,我们项目只合并行,不合并列;

_row:代表合并行的行数,_row的值要么是1,或者更大的自然正整数,要么是0。

1代表:独占一行

更大的自然数:代表合并了若干行

0:代表“消失”的哪那一个单元格,后面的单元格向前推一格

elementUI表格合并单元格的更多相关文章

  1. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  2. 使用POI创建word表格合并单元格兼容wps

    poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...

  3. js 表格合并单元格

    5列  根据需要可添加 或 删除 strOneTemp  strTwoTemp  strThreeTemp  strFourTemp  strFiveTemp //合并单元格  this.mergeC ...

  4. elementUI el-table合并单元格

    合并单元格,如果id列值一致,则合并. <el-table :data="tableData6" :span-method="objectSpanMethod&qu ...

  5. display:table表格合并单元格

    直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  6. html表格合并单元格的运用实例

    效果图: 实现代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><ti ...

  7. html表格合并单元格

    th标签 合并列 colspan="k" 合并行 rowspan="k"   例子<th colspan="2", rowspan=& ...

  8. 表格合并单元格【c#】

    gridBranchInfo.DataSource = dtBranchViewList; gridBranchInfo.DataBind(); Random random = new Random( ...

  9. layui:数据表格如何合并单元格

    layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...

随机推荐

  1. element-UI中el-select下拉框可搜索时候,filter-method自定义搜索方法

    使用element-UI框架的使用,我们经常使用el-select下拉框,很多时候还需要使用可搜索的下拉框,然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法, ...

  2. spring 整合mybatis找不到${jdbc.driverClass}

    1.检查是否设置了mapper扫描org.mybatis.spring.mapper.MapperScannerConfigurer类 在spring里使用org.mybatis.spring.map ...

  3. 六顶思维帽的思考,敏捷开发?——By Me

    人类的思维可以分为很多种,其中按照思维的深度和广度的侧重,可以分为纵向思维和横向思维两种: 简单的来说,“六顶思维帽”可以简单的理解为下图所示: 如何使用这种思维方式呢?举个例子:先输入一个待讨论的事 ...

  4. Web Service简单demo

    最近开发因需求要求需要提供Web Service接口供外部调用,由于之前没有研究过该技术,故查阅资料研究了一番,所以写下来记录一下,方便后续使用. 这个demo采用CXF框架进行开发,后续所提到的We ...

  5. 【网络编程基础】Linux下进程通信方式(共享内存,管道,消息队列,Socket)

    在网络课程中,有讲到Socket编程,对于tcp讲解的环节,为了加深理解,自己写了Linux下进程Socket通信,在学习的过程中,又接触到了其它的几种方式.记录一下. 管道通信(匿名,有名) 管道通 ...

  6. s5_day5作业

    # 1.写函数,用户传入修改的文件名,与要修改的内容,执行函数,完成批量修改操作 # def number_file(file,change_s,change): # import os # with ...

  7. ruby underscore

    “examScore".underscore : exam_score "ExamScore".underscore: exam_score

  8. PL/SQL编程—视图

    create or replace view test_view as select TestA.id, TestB.idno, TestB.name, TestB.sex from TestB le ...

  9. win vista系统的ReadyBoost性能测试

    如果想提高电脑的性能,大家通常会选择升级处理器.内存或是相关硬件,而新一代Windows Vista操作系统中增加的ReadyBoost功能,号称只需一个USB接口的闪存盘(俗称U盘),就能达到加快系 ...

  10. CSS3自定义发光radiobox单选框

    在线演示 本地下载