首页 VueJS element之 table表格数据名称一样,合并相同行

element之 table表格数据名称一样,合并相同行

作者:胡同里的砖头 围观群众:46 更新于:2021-12-13

<template>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%">
<el-table-column
prop="lv1"
label="一级巡查项">
</el-table-column>
<el-table-column
prop="lv2"
label="二级巡查项">
</el-table-column>
<el-table-column
prop="lv3"
label="三级巡查内容描述">
</el-table-column>
</el-table>
</template>

<script>
export default {
data () {
return {
tableData: [
{ lv1: '大坝', lv2: '堰顶', lv3: '堰顶是否平整' },
{ lv1: '大坝', lv2: '堰顶', lv3: '防浪墙是否平整' },
{ lv1: '大坝', lv2: '堰顶', lv3: '两岸坝端是否危害' },
{ lv1: '大坝', lv2: '上游坝坡', lv3: '堰顶是否平整' },
{ lv1: '大坝', lv2: '上游坝坡', lv3: '防浪墙是否平整' },
{ lv1: '大坝', lv2: '上游坝坡', lv3: '两岸坝端是否危害' }
]
}
},
methods: {
objectSpanMethod ({ row, column, rowIndex }) {
const dataProvider = this.tableData
const cellValue = row[column.property]
if (cellValue) {
// 上一条数据
const prevRow = dataProvider[rowIndex - 1]
// 下一条数据
let nextRow = dataProvider[rowIndex + 1]
// 当上一条数据等于下一条数据
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
let rowspan = 1
while (nextRow && nextRow[column.property] === cellValue) {
rowspan++
nextRow = dataProvider[rowspan + rowIndex]
}
if (rowspan > 1) {
return { rowspan, colspan: 1 }
}
}
}
}
}
}
</script>
上述代码也是转自其它博客,是判断所有的列是否有相同项合并,如果只需要判断第一或第二列,自己可以加个if判断即可,如下图

  • 本文标题: element之 table表格数据名称一样,合并相同行
  • 文章分类:【VueJS】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © bysjdq.com All Rights Reserved. 备案号:苏ICP备2021046038