View UI （iview）表格合并单元格（行/列合并）

有时我们在开发过程中会遇到表格里有合并单元格的需求。
今天以View UI （iview）组件库为例。

1. 打开iview官网-table会发现有合并单元格示例：

2. 但是在实际项目中，无法做到像上边代码那样通过 rowIndex和 columnIndex 在前端将合并的单元格写死，而是需要根据后台返回给前端的数据进行逻辑判断，决定合并哪些单元格。

（1）比如现在有一个需求是表格的第一列“类别”中，如果有相同类别名字的进行单元格合并

<template><Table :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
</template>
<script>
export default {data () {return {columns1: [{title: '类别',key: 'name'},{title: '指标内容',key: 'date'}],data1: [{name: 'John Brown',date: 18,},{name: 'John Brown',date: 18,},{name: 'John Brown1',date: 181,},{name: 'John Brown2',date: 182,},{name: 'John Brown2',date: 182,},{name: 'John Brown2',date: 182,},]}
},
methods: {handleSpan ({ row, column, rowIndex, columnIndex }) {}
}
}
</script>

页面如下：

（2）可知：第1、2行name值相同、第4、5、6行name值相同，下面研究如何合并第1行第1列、第2行第1列以及第4行第1列、第5行第1列、第6行第1列。

这里我们将data中的 data1改为 resData，而将 data1改为空数组，用 resData 模拟后台返回前端的数据.

注意：在合并行时，需要合并的数据必须相临，否则无法合并。这里我们直接将 resData 中需要合并的数据设为相临，即第1、2条以及第4、第5、第6条，在实际项目中这部分可以通过前端或者后端来操作这些数据，排序，使之相邻。

修改后的代码如下所示：

<template><Table :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
</template>
<script>
export default {data () {return {columns1: [{title: '类别',key: 'name'},{title: '指标内容',key: 'date'}],resData: [{name: 'John Brown',date: 18,},{name: 'John Brown',date: 18,},{name: 'John Brown1',date: 181,},{name: 'John Brown2',date: 182,},{name: 'John Brown2',date: 182,},{name: 'John Brown2',date: 182,},],data1: []}
},
methods: {handleSpan ({ row, column, rowIndex, columnIndex }) {}
}
}
</script>

（3）然后对 resData 中的数据进行处理，从而实现 name 值相同的行进行合并。

代码如下（具体说明已在代码块中添加注释）：

<template><Table :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
</template>
<script>
export default {data () {return {columns1: [{title: '类别',key: 'name'},{title: '指标内容',key: 'date'}],resData: [{name: 'John Brown',date: 18,},{name: 'John Brown',date: 18,},{name: 'John Brown1',date: 181,},{name: 'John Brown2',date: 182,},{name: 'John Brown2',date: 182,},{name: 'John Brown2',date: 182,},],data1: []}
},
methods: {handleSpan ({ row, column, rowIndex, columnIndex }) {//合并第1列,这里columnIndex==0,根据需求的不同，需要前端写死if(columnIndex == 0) {//计算合并的行数列数let x = row.mergeColumn == 0 ? 0:row.mergeColumnlet y = row.mergeColumn == 0 ? 0:1return [x, y]}},assembleData(data){let names = []//筛选出不重复的 name值,将其放到 names数组中data.forEach(e => {if(!names.includes(e.name)){names.push(e.name)}})let nameNums = []//将names数组中的 name值设置默认合并0个单元格,放到 nameNums中names.forEach(e => {nameNums.push({name:e,num:0})})//计算每种 name值所在行需要合并的单元格数data.forEach(e => {nameNums.forEach(n => {if(e.name == n.name){n.num++}})})//将计算后的合并单元格数整合到 data中data.forEach(e => {nameNums.forEach(n => {if(e.name == n.name){if(names.includes(e.name)){e.mergeColumn = n.num//删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)names.splice(names.indexOf(n.name),1)} else {//被合并的单元格设置为 0e.mergeColumn = 0}}
})
})//将整理后的数据交给表格渲染this.data1 = data}
},mounted(){//这里 this.resData即为后台返回的数据this.assembleData(this.resData)}}
</script>

运行结果如下：

到这里，也就实现了我们想要的效果。

View UI （iview）表格合并单元格（行/列合并）相关推荐

SAP ALV合并单元格示例（合并单元格为表头）
前言实现参考Enno Wulff的文章(德文):Zellen verbinden 在原有基础上新增了部分功能(支持输入合并单元格的显示值) 效果代码主程序 *&------------- ...
php 合并重复数据合并单元格,通过js合并表格重复出现的数据
js必须等表格加载完成后调用. 效果如图: js代码: function uniteTable(tableId,colLength) { //colLength-- 需要合并单元格的列1开始 var ...
html表格里面怎么合并单元格的快捷键,合并单元格快捷键,教您excel怎么合并单元格快捷键...
快捷键是大家办公常用的操作技巧,我们办公中经常会制作一些表格,为了让表格达到最终想要的效果,时常需要将Excel中多个单元格合并成一个单元格.当然,操作方法也有多种,下面,小编给大伙带来了excel合 ...
html表格里面怎么合并单元格的快捷键,合并单元格快捷键ctrl加什么？
01 先选择要合并的单元格,按CTRL+1键,再用"←"及"→"方向键移动到第二个选项卡,再按ALT+M键,再按确定,完成.Excel是Microsoft为使用 ...
个人永久性免费-Excel催化剂功能第52波-相同内容批量合并单元格，取消合并单元格并填充内容...
在高级Excel用户群体中无比痛恨的合并单元格,在现实的表格中却阴魂不散的纠缠不断.今天Excel催化剂也来成为"帮凶",制造更多的合并单元格.虽然开发出此功能,请使用过程中务必要 ...
动态合并单元格行和列方法封装 ~~~起手可用
在项目中遇到一个需求合并单元格行跟列同时合并,抽个方法做个记录,可以直接引入min.js中直接使用 /*** * @param {*} table vue对象, Element-ui Table 插件 ...
html统计表合并单元格的快捷键,合并单元格快捷键,小编教你excel怎么合并单元格快捷键...
合并单元格是我们经常要做的工作,如果有合并单元格的快捷键正是我们想要的,很遗憾,微软并没有直接提供这样一个快捷键,在excel表的运用中,难免会碰到希望将两个单元格合并的时候,那么怎么做呢?下面,小编 ...
【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
<template><el-table :span-method="spanMethod"><el-table-column label=" ...
在DataGrid中合并单元格行
最近在做项目的时候经常遇到要合并单元格的情况,发现这个东西.net中并没有现成的方法,研究了一下,总结了两种方法. 这个主要都是行合并的,有以下两种情况 1.多行合并为一行,其中将某个或某几个单元格的 ...
el-table合并单元格-行合并
合并单元格,如果id列值一致,则合并原理 1.getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组: 2.spanArr是一个空的数组,用于存放每一行记录的合并数: ...

View UI （iview）表格合并单元格（行/列合并）

View UI （iview）表格合并单元格（行/列合并）相关推荐

最新文章

热门文章