vue+elementUI实现动态合并数据相同的单元格(可指定合并列)
作者:慌张的葡萄
这篇文章主要介绍了vue+elementUI如何实现动态合并数据相同的单元格,文中有详细的代码实例供大家参考,具有一定的参考价值,需要的朋友可以参考下
1.业务需求:
- 合并相同数据的单元格(仅合并列);
- 实现条件筛选功能(意思是:内容不固定,需要动态合并);
- 显示数字的列不合并,需要合并指定列(意思就是:我就想合并哪列就哪列 orz);
- 数据相同但所属父级不一致的单元格不合并;
- 空值不合并;
2.效果展示:
3. 实现思路:
3.1 由文档 可知:el-table组件主要靠span-method方法实现合并
3.2 由以下可看出,返回所占单元格的值即可进行合并,那么找出所有单元格的占位即可
- return [rowIndex,columnIndex]
- [5,1] 表示当前单元格占5行,1列
- [0,0] 隐藏单元格
- [1,1] 保持不变
例:生成以下右侧图示数据即可
4.先看一下表数据格式 (test.vue 页面)
tableColumn: [ { prop: 'School', label: '学校' }, { prop: 'Grade', label: '年级' }, { prop: 'Class', label: '班级' }, { prop: 'Name', label: '姓名' }, { prop: 'Chinese', label: '中文' }, { prop: 'Math', label: '数学' }, { prop: 'English', label: '英文' } ], tableData: [ { School: '第一小学', Grade: '1年级', Class: '1班', Name: '张三', Chinese: '90', Math: '100', English: '80' }, ... ]
5.关键代码,抽成共用方法(table.js页面)
/** * 分析每一列,找出所有【列】可合并(数据相同)的单元格 * @param {Array} tableData 表数据 * @param {Array} tableColumn 表字段/表头 * @param {Array} mergeCols 指定合并哪些列(字段) * @returns */ export const getMergeCells = (tableData = [], tableColumn = [], mergeCols = []) => { const fields = tableColumn?.map(v => v.prop) const array = [] if (!tableData?.length || !tableColumn?.length || !mergeCols?.length) return // 倒叙遍历行(方便统计合并列单元格数至最上方,避免表格塌陷) for (let row = tableData.length - 1; row >= 0; row--) { array[row] = [] for (let col = 0; col < fields.length; col++) { // 1.最后一行单元格不合并(初始无可对比数据) // 2.不在指定列(mergeCols)的单元格不合并 // 3.空值不合并 if (row === tableData.length - 1 || !mergeCols.includes(fields[col]) || !tableData[row][fields[col]]) { array[row][col] = [1, 1] continue } // 4.数据相同但所属父级不一致的单元格不合并 const parentFields = mergeCols.slice(0, col) // 在指定合并列中找出所有父级 if (mergeCols.includes(fields[col]) && parentFields?.includes(fields[col - 1])) { const currentParents = parentFields.map(field => tableData[row][field]) // 当前单元格所有父级 const nextRowParents = parentFields.map(field => tableData[row + 1][field]) // 下一行单元格所有父级 if (currentParents?.toString() !== nextRowParents?.toString()) { array[row][col] = [1, 1] continue } } // 5.合并相同数据的单元格 if (tableData[row][fields[col]] === tableData[row + 1][fields[col]]) { const beforeCell = array[row + 1][col] array[row][col] = [1 + beforeCell[0], 1] beforeCell[0] = 0 beforeCell[1] = 0 } else { array[row][col] = [1, 1] // 否则不合并 } } } // console.log(array, 'array') return array }
优点:
- 可动态指定需要合并的列
- 空值(null、undefined、空字符串、0)不会被合并
- 数据相同但所属父级不相同的不会被合并,并且不用手动指定父级
缺点:
- 不支持相邻的行合并
6.完整代码:(test.vue页面)
<template> <div class="main"> <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%"> <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label" min-width="180" /> </el-table> </div> </template> <script> import { getMergeCells } from '@/projects/onemap/utils/table.js' export default { components: {}, mixins: [], props: {}, data() { return { tableColumn: [ { prop: 'School', label: '学校' }, { prop: 'Grade', label: '年级' }, { prop: 'Class', label: '班级' }, { prop: 'Name', label: '姓名' }, { prop: 'Chinese', label: '中文' }, { prop: 'Math', label: '数学' }, { prop: 'English', label: '英文' } ], tableData: [ { School: '第一小学', Grade: '1年级', Class: '1班', Name: '张三', Chinese: '90', Math: '100', English: '80' }, { School: '第一小学', Grade: '1年级', Class: '1班', Name: '张伟', Chinese: '90', Math: '99', English: '89' }, { School: '第一小学', Grade: '1年级', Class: '2班', Name: '李四', Chinese: '90', Math: '85', English: '80' }, { School: '第一小学', Grade: '1年级', Class: '3班', Name: '王五', Chinese: '79', Math: '100', English: '80' }, { School: '第一小学', Grade: '2年级', Class: '1班', Name: '赵六', Chinese: '95', Math: '100', English: '80' }, { School: '第一小学', Grade: '2年级', Class: '2班', Name: '钱八', Chinese: '98', Math: '85', English: '80' }, { School: '第一小学', Grade: '2年级', Class: '3班', Name: '陈九', Chinese: '79', Math: '100', English: '100' }, { School: '第一小学', Grade: '3年级', Class: '1班', Name: '黄十', Chinese: '91', Math: '88', English: '80' }, { School: '第一小学', Grade: '3年级', Class: '2班', Name: '魏一', Chinese: '90', Math: '86', English: '87' }, { School: '第一小学', Grade: '3年级', Class: '3班', Name: '杨二', Chinese: '79', Math: '99', English: '80' }, { School: '第二小学', Grade: '3年级', Class: '3班', Name: '袁零', Chinese: '79', Math: '99', English: '80' } ] } }, computed: { // 获取所有单元格合并数据 spanArr() { if (!this.tableColumn.length) return [] const mergeCols = ['School', 'Grade', 'Class'] // 需要合并的列(字段) return getMergeCells(this.tableData, this.tableColumn, mergeCols) } }, watch: {}, created() {}, mounted() {}, destroyed() {}, methods: { // 表数据合并 objectSpanMethod({ row, column, rowIndex, columnIndex }) { return this.spanArr[rowIndex][columnIndex] } } } </script> <style lang="scss" scoped> .main { width: 100%; height: 100%; } </style>
以上就是vue+elementUI实现动态合并数据相同的单元格(可指定合并列)的详细内容,更多关于vue+elementUI合并单元格的资料请关注脚本之家其它相关文章!