vue + Element UI table动态合并单元格

一、功能需求

1、根据名称相同的合并工作阶段和主要任务合并这两列,但主要任务内容一样,但要考虑主要任务一样,但工作阶段不一样的情况。(枞向合并)

2、落实情况里的定量内容和定性内容值一样则合并。(横向合并)

二、功能实现

<template>

<div class="effect">

<el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">

<el-table-column type="index" label="序号" align="center" width="180">

</el-table-column>

<el-table-column prop="name" label="工作阶段" align="center" min-width="180">

</el-table-column>

<el-table-column prop="address" label="主要任务" align="center" min-width="180">

</el-table-column>

</el-table>

</div>

</template>

<script>

export default {

data () {

return {

tableData: [

{

name: 'a',

address: '1',

age:'1',

six:'2'

},

{

name: 'a',

address: '1',

age:'1',

six:'2'

},

{

name: 'a',

address: '1',

age:'1',

six:'2'

},

{

name: 'a',

address: '1',

age:'1',

six:'2'

},

{

name: 'a',

address: '2',

age:'1',

six:'2'

},

{

name: 'a',

address: '2',

age:'1',

six:'1'

},

{

name: 'a',

address: '3',

age:'1',

six:'1'

},

{

name: 'a',

address: '3',

age:'1',

six:'1'

},

{

name: 'b',

address: '3',

age:'1',

six:'1'

},

{

name: 'b',

address: '3',

age:'1',

six:'1'

},

{

name: 'b',

address: '3',

age:'1',

six:'1'

},

{

name: 'b',

address: '4',

age:'1',

six:'1'

},

{

name: 'b',

address: '4',

age:'1',

six:'1'

},

{

name: 'b',

address: '5',

age:'2',

six:'1'

},

{

name: 'b',

address: '5',

age:'',

six:''

},

]

}

},

mounted () {

// 处理第二列的合并

for (let i = 0; i < this.tableData.length; i++) {

//第一个单元格合并列为1

this.tableData[i].nameSpan = 1

//和后面值的比较,

for (let j = i+1; j < this.tableData.length; j++) {

//如果值一样,则合并列为+1

if(this.tableData[i].name != this.tableData[j].name){

//如果遇到值不一样,则将 i = k -1 因为 下次循环i会+1

i = j-1

// 结束循环

break;

}else{

this.tableData[i].nameSpan += 1

// 最后一行了,将k的值赋给i,结束循环

if(j == this.tableData.length-1){

i = j

// 结束循环

break;

}

}

}

}

// 处理第三列的合并

for (let i = 0; i < this.tableData.length; i++) {

//第一个单元格合并列为1

this.tableData[i].addressSpan = 1

//和后面值的比较,

for (let k = i+1; k < this.tableData.length; k++) {

//如果值一样,则合并列为+1

if(this.tableData[i].address == this.tableData[k].address && this.tableData[i].name == this.tableData[k].name){

this.tableData[i].addressSpan += 1

// 最后一行了,将k的值赋给i,结束循环

if(k == this.tableData.length-1){

i = k

// 结束循环

break;

}

}else{

//如果遇到值不一样,则将 i = k -1 因为 下次循环i会+1

i = k-1

// 结束循环

break;

}

}

}

// 处理第四列和第五列横向合并

for (let i = 0; i < this.tableData.length; i++) {

this.tableData[i].ageColspan = 1

if(this.tableData[i].age && this.tableData[i].six && this.tableData[i].age == this.tableData[i].six){

this.tableData[i].ageColspan += 1

}

}

console.log(this.tableData);

},

methods: {

//合并方法

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {

if (columnIndex === 1) {

return {rowspan:row.nameSpan,colspan: 1}

}

if (columnIndex === 2) {

return {rowspan:row.addressSpan,colspan: 1}

}

if (columnIndex === 3) {

return {rowspan:1,colspan: row.ageColspan}

}

}

},

}

</script>

<style lang="scss" scoped>

.effect {

width: 100%;

height: calc(100vh - 90px);

padding: 5px;

}

</style>

相关推荐
IT_陈寒1 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询17 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang20 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼23 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
前端君9 小时前
实现最大异步并发执行队列
javascript