antd-vue-table 合并相同单元格记录
var spanArr=[]; var position=0; //列合并 const renderContent = (value, row, index) => { const obj = { children: value, attrs: {} }; const _row = spanArr[index]; const _col = _row> 0 ? 1 : 0; obj.attrs = { rowSpan: _row, colSpan: _col }; return obj; };
//计算合并 const rowspan = (userData)=>{ spanArr=[]; position=0; userData.forEach((item,index) => { if(index === 0){ spanArr.push(1); position = 0; }else{
//需要合并的地方判断 if(userData[index].CheckItem === userData[index-1].CheckItem ){ spanArr[position] += 1; spanArr.push(0); }else{ spanArr.push(1); position = index; } } }); } //列名 const columnsScore = [ { title: '编号', dataIndex: 'ScoreId', width: 80, }, { title: '检查项目', dataIndex: 'CheckItem', width: 100, customRender: renderContent }, { title: '检查内容', dataIndex: 'CheckContent', width: 130 }, { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } } ]
//请求table数据
this.$axios({ method: "post", url: "/QuaLity/GetQuality",}).then(res => {
this.dataSource=res.data.Data;
rowspan(res.data.Data);
}).catch(() => { this.$message.error('连接服务器失败'););
最终:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义