Vue3+antd:表格中合并多行相同数据
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
注:本次以合并相同ID为示例
首先获取远程数据,获取完成之后对数据进行遍历
let customCellList = []; // {start:0,length:2,id:xx}
// 如果接口返回的数据相同ID之间不相邻,需要手动排序后才可以实现合并效果
res.data.forEach((item, index) => {
if (index > 0) {
let preItem = res.data[index - 1]
if (preItem.id === item.id) {
let custIndex = customCellList.findIndex(v => v.id == item.id)
if (custIndex == -1) {
customCellList.push({
start: index - 1,
length: 2,
id: item.id
})
} else {
customCellList[custIndex].length++
}
}
}
})
最后得到的代码示例如下:
根据数组设置合并行
const changeCustomCellFn = (arr) => {
let nowCustomCell = (_, custIndex) => {
let obj = { rowSpan: 1 }
arr.forEach(item => {
const { nowIndex, length } = item
if (custIndex === nowIndex) {
obj = {
rowSpan: length,
};
} else if (nowIndex < custIndex && custIndex < nowIndex + length) {
obj = {
rowSpan: 0
}
}
})
return obj
}
// userColumns[0] 是Id列所在的位置,可根据位置不同调整 相应下标
userColumns[0].customCell = nowCustomCell ;
}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)