vue3中el-table实现多表头并表格合并行或列代码示例

2024-03-01 0 754
目录
  • 1、el-table中添加事件:span-method="genderSpanCity"
  • 2、js添加函数
  • 效果图为
  • 总结

1、el-table中添加事件:span-method="genderSpanCity"

<el-table :span-method=\”genderSpanCity\”
:data=\”data.tableData\”
:fit=\”true\” table-layout=\”fixed\” header-align=\”center\” stripe
style=\”width:100%;height: 96%;\”
:cell-style=\”{borderColor:\’#aaa\’}\”
:header-cell-style=\”{color:\’#000\’,textAlign:\’center\’,borderColor:\’ #CCC\’,background:\’#f9f9f9\’,height:\’50px\’}\”
v-else>
<el-table-column :label=\”$t(\’wms.dailyProduct\’)\” align=\”center\” height=\”70px\”>
<el-table-column>
<el-table-column prop=\”process\” :label=\”$t(\’mes.workingProcedure\’)\” width=\”100\” align=\”center\”/>
<el-table-column prop=\”item\” width=\”130\”/>
<el-table-column prop=\”item2\” width=\”150\”/>
</el-table-column>
<!–二级标题日期–>
<el-table-column v-for=\”(name,index) in data.title\” :key=\”name\” :label=\”name\” align=\”center\”>
<!– 三级标题–>
<el-table-column v-for=\”column in data.tableColumns\” :key=\”column.prop\”
:prop=\”column.prop\”
:label=\”column.label\” align=\”center\”>
<template #default=\”scope\”>
{{ scope.row.custom.length > 0 ? scope.row.custom[index][column.prop] : scope.row.custom[column.prop] }}
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>

2、js添加函数

// 合并列
const genderSpanCity = ({
row,
column,
rowIndex,
columnIndex
}) => {
// 合并前4行的2列与3列
for (let i = 0; i < 13; i++) {
if (columnIndex === 1 && rowIndex === i) {
return {
rowspan: 1,
colspan: 2
}
} else if (columnIndex === 2 && rowIndex === i) {
return {
rowspan: 0,
colspan: 0
}
}
}

// 合并第4行以后的数据
for (let i = 4; i < data.tableData.length; i++) {
if (columnIndex > 3 && columnIndex % 2 === 0 && rowIndex === i) {
return [1, 3]
} else if (columnIndex >= 3 && columnIndex % 2 === 1 && rowIndex === i) {
return [0, 0]
}
}
// 合并前两列的数据
if (columnIndex === 0 || columnIndex === 1) {
// 获取当前单元格的值
const currentValue = row[column.property]
// 获取上一行相同列的值
const preRow = data.tableData[rowIndex – 1]
const preValue = preRow ? preRow[column.property] : null
// 如果当前值和上一行的值相同,则将当前单元格隐藏
if (currentValue === preValue) {
return {
rowspan: 0,
colspan: 0
}
} else {
// 否则计算当前单元格应该跨越多少行
let rowspan = 1
for (let i = rowIndex + 1; i < data.tableData.length; i++) {
const nextRow = data.tableData[i]
const nextValue = nextRow[column.property]
if (nextValue === currentValue) {
rowspan++
} else {
break
}
}
return {
rowspan,
colspan: 1
}
}
}
}

效果图为

vue3中el-table实现多表头并表格合并行或列代码示例

总结

到此这篇关于vue3中el-table实现多表头并表格合并行或列的文章就介绍到这了,更多相关vue3 el-table多表头表格合并行列内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • vue element ui表格相同数据合并单元格效果实例
  • Vue实现表格合并与拆分的示例代码
  • Vue表格首列相同数据合并实现方法
  • vueelementtable表格相同名称列合并方式
  • vue复杂表格单元格合并根据数据动态合并方式

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript vue3中el-table实现多表头并表格合并行或列代码示例 https://www.u-9.cn/biancheng/javascript/182415.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务