热门标签
热门文章
- 1代码随想录算法训练营第四十九天| LeetCode121. 买卖股票的最佳时机、LeetCode122. 买卖股票的最佳时机 II_leetcode 买卖股票区别
- 2微信小程序使用tabbar实现点击切换页面_用于切换的怎么写用小程序
- 3【愚公系列】软考中级-软件设计师 051-面向对象技术（设计模式-结构型）_24年软考中级原题 代理模式还是外观模式
- 4微信小程序开发之会议OA项目首页搭建_oa小程序源码 网盘
- 5百度AI开放平台SDK的下载链接和使用_aipsdk.dll
- 6android 代码绘制,Android绘制源码分析（下）
- 7Android网络抓包--Charles_安卓抓包
- 8Gir clone 设置代理与错误
- 9职称申报需要满足的条件_职称申报必须具备的条件
- 10JS 怎么理解ES6新增Set、Map两种数据结构?_js es6 map
当前位置: article > 正文
element UI table合并行合并列(整理)_element ui table 合并列
作者：凡人多烦事01 | 2024-06-07 19:10:53
赞
踩
element ui table 合并列
效果图1：
图一
<template>
<div class="container">
<el-table :data="dataSource" :border="true"
:header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }" size="mini" style="width: 100%" :span-method="arraySpanMethod">
<el-table-column type="index" label="序号" width="100"></el-table-column>
<el-table-column prop="product_name" label="名称1"></el-table-column>
<el-table-column prop="cap_name" label="名称2"></el-table-column>
<el-table-column prop="name" label="名称3"></el-table-column>
<el-table-column prop="name1" label="名称4"></el-table-column>
<el-table-column prop="name2" label="名称5"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "tableCom",
data() {
return {
//注释：示例是用参数-product_name进行处理-该例好像只有数据是连续aaaa 或 bbbb才可以（第一条是a第二条是a第三条是b---不能第二条是b，第三条是a）
dataSource: [{
product_name: "aaaa",
cap_name: "aa1",
"name": 1,
"name1": 1,
"name2": 0
},
{
product_name: "aaaa",
cap_name: "aa2",
"name": 0,
"name1": 1,
"name2": 1
},
{
product_name: "bbbb",
cap_name: "bb1",
"name": 1,
"name1": 1,
"name2": 0
},
{
product_name: "bbbb",
cap_name: "bb2",
"name": 0,
"name1": 1,
"name2": 1
},
{
product_name: "bbbb",
cap_name: "bb3",
"name": 0,
"name1": 1,
"name2": 1
},
{
product_name: "ccccc",
cap_name: "cc2",
"name": 0,
"name1": 1,
"name2": 1
},
{
product_name: "ddddd",
cap_name: "dd3",
"name": 0,
"name1": 1,
"name2": 1
},
],
};
},
methods: {
arraySpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
// 合并行 产品名字相同合并
if (columnIndex === 1) {
if (rowIndex === 0 || row.product_name != this.dataSource[rowIndex - 1].product_name) {
let rowspan = 0;
this.dataSource.forEach(element => {
if (element.product_name === row.product_name) {
rowspan++;
}
});
return [rowspan, 1];
} else {
return [0, 0];
}
}
//合并列 名称值都为1 的合并
if (columnIndex > 2) {
let colspan = 0;
let colkeys = Object.keys(row);
let currentindex = columnIndex - 1;
if (row[colkeys[currentindex]] === 1) {
if (row[colkeys[currentindex - 1]] != row[colkeys[currentindex]]) {
for (let i = currentindex; i < colkeys.length; i++) {
if (row[colkeys[i]] === 1) {
colspan++;
} else {
break;
}
}
return [1, colspan];
} else {
return [0, 0];
}
}
}
}
},
created() {
}
};
</script>
图二、
<template>
<div class="container">
<el-table :data="tableData" border :span-method="objectSpanMethod">
<el-table-column prop="name" label="测试1" align="center" />
<el-table-column prop="name1" label="测试2" align="center" />
<el-table-column prop="name2" label="测试3" align="center" />
</el-table>
</div>
</template>
<script>
export default {
name: "tableCom",
data() {
return {
tableData: [{
name: "测试1",
name1: "111",
name2: "1",
},
{
name: "测试1",
name1: "11111",
name2: "1",
},
{
name: "测试1",
name1: "11111",
name2: "1",
},
{
name: "测试1",
name1: "111111",
name2: "1",
},
{
name: "测试2",
name1: "222",
name2: "２",
},
{
name: "测试2",
name1: "2222",
name2: "２",
},
{
name: "测试3",
name1: "333333",
name2: "3",
},
],
rowIndex: "-1",
OrderIndexArr: [],
provinceArr: []
};
},
methods: {
merge() {
let OrderObj = {};
let provinceObj = {};
this.tableData.forEach((element, index) => {
element.rowIndex = index;
if (OrderObj[element.name]) {
let nextItem = this.tableData[index + 1] ?
this.tableData[index + 1].name :
undefined;
let prevItem = this.tableData[index - 1].name ?
this.tableData[index - 1].name :
undefined;
if (element.name == nextItem) {
OrderObj[element.name].push(index);
} else if (element.name == prevItem) {
OrderObj[element.name].push(index);
}
} else {
OrderObj[element.name] = [];
OrderObj[element.name].push(index);
}
if (provinceObj[element.name1]) {
let nextPro = this.tableData[index + 1] ?
this.tableData[index + 1].name1 :
undefined;
let prevPro = this.tableData[index - 1].name1 ?
this.tableData[index - 1].name1 :
undefined;
if (element.name1 == nextPro) {
provinceObj[element.name1].push(index);
} else if (element.name1 == prevPro) {
provinceObj[element.name1].push(index);
}
} else {
provinceObj[element.name1] = [];
provinceObj[element.name1].push(index);
}
});
// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k]);
}
}
for (let i in provinceObj) {
if (provinceObj[i].length > 1) {
this.handleData(provinceObj[i])
}
}
},
handleData(data) {
console.log(data, 'data');
let temp = data;
let itemArr = [];
let itemArrNew = [];
let resArr = [];
if (data.length > 2) {
for (let i = 0; i < data.length; i++) {
if (data[i + 1]) {
if (data[i + 1] - data[i] > 1) {
itemArr = data.slice(0, i + 1)
itemArrNew = temp.slice(i + 1, temp.length)
break;
} else {
resArr = data
}
}
}
if (itemArr.length > 0 || itemArrNew.length > 0) {
this.provinceArr.push(itemArr)
this.provinceArr.push(itemArrNew)
} else {
this.provinceArr.push(data)
}
} else {
this.provinceArr.push(data)
}
},
objectSpanMethod({
row,
rowIndex,
column,
columnIndex
}) {
if (columnIndex === 0) {
for (let i = 0; i < this.OrderIndexArr.length; i++) {
let element = this.OrderIndexArr[i];
for (let j = 0; j < element.length; j++) {
let item = element[j];
if (rowIndex === item) {
if (j === 0) {
return {
rowspan: element.length,
colspan: 1
};
} else if (j !== 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
if (columnIndex === 1) {
for (let j = 0; j < this.provinceArr.length; j++) {
let element = this.provinceArr[j];
for (let k = 0; k < element.length; k++) {
let item = element[k];
if (rowIndex === item) {
if (k === 0) {
return {
rowspan: element.length,
colspan: 1
};
} else if (k !== 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
},
},
created() {
this.$nextTick(() => {
this.merge()
})
}
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
效果图2：
加了个合计的功能
this.tableData = [{
product_name: "aaaa",
cap_name: "aa1",
"name3": 3,
},
{
product_name: "aaaa",
cap_name: "aa2",
"name3": 2,
},
{
product_name: "bbbb",
cap_name: "bb1",
"name3": 3,
},
{
product_name: "bbbb",
cap_name: "bb2",
"name3": 2,
},
{
product_name: "bbbb",
cap_name: "bb3",
"name3": 1
},
{
product_name: "ccccc",
cap_name: "cc2",
"name3": 4
},
{
product_name: "ddddd",
cap_name: "dd3",
"name3": 5
}
]
// 先定义一个数组，存放队组工时的
var gongshiArr = new Array();
// 计算工时
this.tableData.forEach((item, index) => {
if (gongshiArr[item.product_name]) { // 判断是否存在，如果存在
gongshiArr[item.product_name] = gongshiArr[item.product_name] + item.name3;
} else {
gongshiArr[item.product_name] = item.name3;
}
});
// 给队组赋值
this.tableData.forEach((item, index) => {
item.allNum = gongshiArr[item.product_name];//合计
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
感谢您的支持
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/686690
推荐阅读
相关标签
