vue项目element-ui的table表格单元格合并

一、合并效果

二全部代码

<template><div class="table-wrap"><el-table:data="tableData":span-method="handleSpanMethod":cell-style="{ background: '#FFFFFF' }"border><el-table-column prop="id" label="id" align="center" /><el-table-column prop="name" label="名称" align="center" /><el-table-column prop="amount1" label="身高" align="center" /><el-table-column prop="amount2" label="体脂" align="center" /><el-table-column prop="amount3" label="年龄" align="center" /></el-table></div>
</template><script>
export default {name: 'CellMerge',data() {return {tableData: [{id: '1',name: '王小虎',amount1: '165',amount2: '3.2',amount3: 10}, {id: '1',name: '王小虎',amount1: '162',amount2: '4.43',amount3: 12}, {id: '1',name: '王we虎',amount1: '621',amount2: '1.9',amount3: 9}, {id: '2',name: '王we虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '3',name: '王小虎',amount1: '621',amount2: '4.1',amount3: 15}],// 合并单元格column1Arr: [], // column1column1Index: 0, // column1索引column2Arr: [], // column2column2Index: 0, // column2索引column3Arr: [], // column3column3Index: 0, // column3索引}},mounted(){this.mergeTable(this.tableData)},methods: {// 合并表格mergeTable(data) {if (data.length > 0) {for (var i = 0; i < data.length; i++) {if (i === 0) {// 第一行必须存在，以第一行为基准this.column1Arr.push(1) // column1this.column1Index = 0this.column2Arr.push(1) // column2this.column2Index = 0this.column3Arr.push(1) // column3this.column3Index = 0} else {// 判断当前元素与上一元素是否相同// column1if (data[i].id === data[i - 1].id ) {this.column1Arr[this.column1Index] += 1this.column1Arr.push(0)} else {this.column1Arr.push(1)this.column1Index = i}// column2if (data[i].name === data[i - 1].name && data[i].id === data[i - 1].id ) {this.column2Arr[this.column2Index] += 1this.column2Arr.push(0)} else {this.column2Arr.push(1)this.column2Index = i}// column3if (data[i].amount1 === data[i - 1].amount1  && data[i].name === data[i - 1].name&& data[i].id === data[i - 1].id ) {this.column3Arr[this.column3Index] += 1this.column3Arr.push(0)} else {this.column3Arr.push(1)this.column3Index = i}}}}},handleSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {// 第一列 column1const _row_1 = this.column1Arr[rowIndex]const _col_1 = _row_1 > 0 ? 1 : 0return {rowspan: _row_1,colspan: _col_1}} else if (columnIndex === 1) {// 第二列 column2const _row_2 = this.column2Arr[rowIndex]const _col_2 = _row_2 > 0 ? 1 : 0return {rowspan: _row_2,colspan: _col_2}} else if (columnIndex === 2) {// 第二列 column2const _row_3 = this.column3Arr[rowIndex]const _col_3 = _row_3 > 0 ? 1 : 0return {rowspan: _row_3,colspan: _col_3}} }}
}
</script>
<style>
</style>

vue项目element-ui的table表格单元格合并相关推荐

Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
table表格单元格合并，(自定义)
效果图: <template><div class="table"><table border="1" cellspacing=& ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
iview table 求和_iView table 实现单元格合并
前言当前问题使用的ivew 版本:3.4.2 后续版本可能会实现相关功能,请留意官方文档. 背景最近做的项目使用的是iView框架,有个需求是要对iView的table进行单元格合并,但是iVie ...
elementUI——表格单元格合并——技能提升
elementUI--表格单元格合并--技能提升之前写过一个关于单元格合并的功能,要求根据某一个参数比如序号,如果同一个序号下的某些参数前后的数据一致,则需要实现单元格的合并. 效果图如下: 还有一 ...
Element UI Element Plus之改变表格单元格颜色
首先官网文档中有 Table 表格组件的属性说明,只需要在el-table标签中加上:cell-style="xxx",以及实现该方法即可.Element UI框架和Elemen ...
table表格单元格padding_html表格单元格间距
html中单元格间距与单元格边距的区别就是cellspacing和cellpadding之间的区别,赐教. 定义和用法 cellSpacing 属性可设置或返回在表格中的单元格之间的空白量(以像素为单 ...
iview table表格单元格的动态合并
1. 需求需要将从后台获取的数据,在前端渲染时,如果同一列相邻的数据相同,则合并成一个单元格. 即: 需要将上图两个单元格合并,成果图如下 2. 问题本项目使用的是iview组件,iview组件也 ...
表格table及单元格合并
表格table 表格常用标签: table:表格 th:表头 tr:表格行 td:单元格数据注意:boder:1; 给表格加边框. 表格常用CSS样式: boder-collpase:collpas ...

vue项目element-ui的table表格单元格合并

一、合并效果

二全部代码

vue项目element-ui的table表格单元格合并相关推荐

最新文章

热门文章