vue3 +前端实现单元格合并
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
vue3 + Antd 3 前端实现单元格合并
如果后端接口返回的数据直接给定相关合并的属性,那么直接使用即可,不需要以下方法。
如果接口数据没有给相关合并属性,那么需要前端自行处理进行合并,需要自行添加rowSpan属性(实现上图样式)代码如下:(只把修改数据的方法展示出来,开发中根据实际需要的数据格式进行修改)
const columns = [
{
title: '日志分类',
dataIndex: 'logType',
customCell: (_, index) => {
if (_.rowSpan > 0) {
return { rowSpan: _.rowSpan }
} else {
return { rowSpan: 0 }
}
}
},
]
1、数据无序(需要合并的数据没有挨着)
//假数据
let a = {
pages: 1,
records: [
{
id: '1',
logType: '设备分类1',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
},
{
id: '2',
logType: '设备分类2',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
},
{
id: '3',
logType: '设备分类4',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
},
{
id: '4',
logType: '设备分类2',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
},
{
id: '5',
logType: '设备分类2',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
}
],
total: 5
}
let newData = [] //如果数据顺序错乱,newData 这个步骤可以调整顺序
for (let i = 0; i < a.records.length; i++) {
let num = 0
let flag = true
if (newData.length > 0) { //判断是否已经添加
for (let k = 0; k < newData.length; k++) {
if (newData[k].id == a.records[i].id) {
flag = false
}
}
}
if (flag) {
num++ //为了让不需要合并的单元格rowspan=1
newData.push(a.records[i])
}
for (let j = i + 1; j < a.records.length; j++) {
if (a.records[j].logType == a.records[i].logType && !a.records[i].hasOwnProperty('rowSpan')) {
num++
Reflect.set(a.records[j], 'rowSpan', 0) //需要合并的rowspan都是0
newData.push(a.records[j])
}
}
Reflect.set(a.records[i], 'rowSpan', num)
//注意:push()方法是浅拷贝,record[i]修改,newData自动修改
//newData[i]=a.records[i]
}
a.records = newData
2、数据有序(需要合并的数据挨着)
//类似这样
records: [
{
id: '1',
logType: '设备分类1',
logTypeChild: 'CPU1',
orgId: null,
ruleNo: '9999'
},
{
id: '2',
logType: '设备分类2',
logTypeChild: 'CPU2',
orgId: null,
ruleNo: '9999'
},
{
id: '3',
logType: '设备分类2',
logTypeChild: 'CPU3',
orgId: null,
ruleNo: '9999'
},
{
id: '4',
logType: '设备分类5',
logTypeChild: 'CPU4',
orgId: null,
ruleNo: '9999'
},
{
id: '5',
logType: '设备分类5',
logTypeChild: 'CPU5',
orgId: null,
ruleNo: '9999'
}
for (let i = 0; i < a.records.length; i++) {
let num = 1 //为了区分被合并项,需要初始为1
for (let j = i + 1; j < a.records.length; j++) {
if (a.records[j].logType == a.records[i].logType && !a.records[i].hasOwnProperty('rowSpan')) {
num++
Reflect.set(a.records[j], 'rowSpan', 0)
}
}
if (!a.records[i].hasOwnProperty('rowSpan')) { //这个判断必不可少,防止已经存在rowSpan=0的数据被改
Reflect.set(a.records[i], 'rowSpan', num)
}
}
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
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> 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)