table表格的合并
2024-09-18 09:50:23
如上图，实现单元格合并功能，不多说，直接上代码
一，添加 :span-method="objectSpanMethod"
<el-table
:key="timer1"
:data="tableData"
:span-method="objectSpanMethod"
style="width: 100%"
cell-class-name="cellStyle"
highlight-current-row
>
二，objectSpanMethod方法计算合并
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { //第一列 下标为0
if (rowIndex === 0) { //第一列下的第一行 下标为0
return {
rowspan: 4, //向下合并4个
colspan: 1
};
}else{ //其他的不变
return {
rowspan: 0,
colspan: 0
};
}
}else if(columnIndex === 4){ //第四列也需要合并 同理
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
}
}else if(columnIndex === 5){ //第五列也需要合并 同理
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
}
}
},
第二种情况：每一列都有两个合并行 方法类似，无非每一列多了一个行的合并
objectSpanMethod_two({ row, column, rowIndex, columnIndex }){
if (columnIndex === 0) { //第一列
if (rowIndex === 0) { //第一行 需要合并4个单元格
return {
rowspan: 4,
colspan: 1
};
}else if (rowIndex === 4){ //第四行，需要合并下面四个单元格
return {
rowspan: 4,
colspan: 1
};
}else { //其他不变，这个一定不能漏了
return {
rowspan: 0,
colspan: 0
};
}
}else if(columnIndex === 4){
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
}else if (rowIndex === 4){
return {
rowspan: 4,
colspan: 1
};
}
}else if(columnIndex === 5){
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
}else if (rowIndex === 4){
return {
rowspan: 4,
colspan: 1
};
}
}
},
最新文章
- CA扫盲的巅峰之作！！！
- phpstorm常用快捷键
- 了解 JavaScript （5）– 翻转器（rollover)
- Sqli-labs less 26
- 分布式数据库中间件TDDL、Amoeba、Cobar、MyCAT架构比较分
- Linux SCP 命令： 利用SSH传输文件
- boj1267 Infinite’s Cave 树形dp + 背包
- cocos2d的框架思路
- Global build settings
- openstack安装文档
- MVC 统一异常处理
- git代码同步服务器代码需要注意的问题
- Android NDK编译之undefined reference to 'JNI_CreateJavaVM'
- JavaScript大杂烩13 - 总结ECMAScript 5新功能
- kubernetes 生命周期问题分析
- 解决nginx中fastcgi(php-fpm)60s超时的问题
- 20172308 实验二《Java面向对象程序设计 》实验报告
- /dev/null脚本中作用
- js之购物车案例
- 深度学习应用系列（一）| 在Ubuntu 18.04安装tensorflow 1.10 GPU版本