elementUI table 第一列值相等合并
2024-09-08 05:21:05
效果如下:
首先:在table上加:span-method="spanMethod"
其次:
methods中加两个方法
dataPretreatment() {
//表格数据列合并预处理,生成一个与行数相同的数组记录每一行设置的合并数
// 如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;
// 如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,
// 则向mergingRows中添入元素0,并将前一位元素+1,表示合并行数+1,
// 以此往复,得到所有行的合并数,0即表示该行不显示。
for (let i = 0; i < this.tableData.length; i++) { // tabledata 表格数据源
if (i === 0) {
this.mergingRows.push(1)
this.mergingPos = 0
} else {
if (this.tableData[i].level === this.tableData[i - 1].level) { //哪些数据是要合并的 合并的条件是什么
this.mergingRows[this.mergingPos] += 1
this.mergingRows.push(0)
} else {
this.mergingRows.push(1)
this.mergingPos = i
}
}
}
},
spanMethod({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0) { //第一列
const _row = this.mergingRows[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
最后在created中调用 dataPretreatment() 方法。
结。
最新文章
- golang os.OpenFile
- handlebars.js的运用与整理
- (七)HTTP协议
- IE10访问apache 2.4会奇慢的解决办法
- WordPress折腾日记
- 工作流引擎Activiti使用总结
- js使用for in遍历时的细节问题
- 201521123009 《Java程序设计》第8周学习总结
- Python-老男孩-02_装饰器_面向对象_封装_继承_异常_接口_数据库
- 防止ajax重复提交
- DOM解析原理示意
- SQL转化为MapReduce的过程
- CS20SI-tensorflow for research笔记: Lecture3
- 使用FileZilla从Linux系统下载文件
- MySQL使用AUTO_INCREMENT列的表注意事项之update自增列篇
- Application Server not specified
- 2018-2019-2 网络对抗week1 Kali安装 20165333陈国超
- Python打包方法——Pyinstaller
- 「Vue」登陆-路由拦截器
- [Winform]只允许运行一个exe,如果已运行则将窗口置前
热门文章
- hive元起动报错:Exception in thread ";main"; java.lang.NoSuchMethodError: com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;Ljava/lang/Object;)V
- 调度器45—wake_affine
- JAVA常用类(一)Syatem类
- springcloud(四) - 服务治理Hystrix
- php 常用工具函数
- Redis实战(三)Redis冷备如何做
- 打开IE浏览器被强制跳转至edge
- 4-发票校验-不可能为条目1000 DIF确立帐户-消息号 M8147
- firefox用于web安全测试的插件[转]
- 如何让一个 div 左右各空一定距离然后 div 占满剩下的宽度?