el-table表格动态合并行、合并行列及详解(el-table-column label动态)

el-table表格动态合并行、合并行列及详解

推荐整理分享el-table表格动态合并行、合并行列及详解(el-table-column label动态)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:element 动态表格,el-table动态表头,element 动态表格,el-table动态数据,el-table动态表头,el-table-column label动态,eltable动态列,el-table 动态列,内容如对您有帮助，希望把文章链接给更多的朋友！

📝 个人简介

⭐ 个人主页：我是段段🙋‍ 🍊 博客领域：编程基础、前端💻 🍅 写作风格：干货！干货！都是干货！ 🍑 精选专栏：Vue 🛸 支持段段：点赞👍、收藏⭐、留言💬

文章目录前言1、合并行2、合并行列前言

在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下：

而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下：

1、合并行

所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单

<template> <div class="table"> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%"> <el-table-column prop="time" label="时间"></el-table-column> <el-table-column prop="grade" label="年级"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="subjects" label="科目"></el-table-column> <el-table-column prop="score" label="成绩"></el-table-column> </el-table> </div></template>

span-method是el-table上属性，其值是一个函数，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下：

tableData: [ { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文', score: 80 }, { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学', score: 80 }, { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文', score: 70 }, { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '数学', score: 80 }, { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '语文', score: 60 }, { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '数学', score: 60 }, ],mergeObj: {}, // 用来记录需要合并行的下标mergeArr: ['time', 'grade', 'name', 'subjects', 'score'] // 表格中的列名

首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）

在mounted中调用数据初始化数据的方法，如下：

mounted() { this.getSpanArr(this.tableData);}// getSpanArr方法getSpanArr(data) { this.mergeArr.forEach((key, index1) => { let count = 0; // 用来记录需要合并行的起始位置 this.mergeObj[key] = []; // 记录每一列的合并信息 data.forEach((item, index) => { // index == 0表示数据为第一行，直接 push 一个 1 if(index === 0) { this.mergeObj[key].push(1); } else { // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位 if(item[key] === data[index - 1][key]) { this.mergeObj[key][count] += 1; this.mergeObj[key].push(0); } else { // 如果当前行和上一行其值不相等 count = index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1 } } }) })}

数据处理好之后就可以调用objectSpanMethod方法了，如下：

// objectSpanMethod方法// 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 判断列的属性 if(this.mergeArr.indexOf(column.property) !== -1) { // 判断其值是不是为0 if(this.mergeObj[column.property][rowIndex]) { return [this.mergeObj[column.property][rowIndex], 1] } else { // 如果为0则为需要合并的行 return [0, 0]; } }}

合并后的结果就是我们想要的形式： 合并行完整的代码如下：

<template> <div class="table"> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%"> <el-table-column prop="time" label="时间"></el-table-column> <el-table-column prop="grade" label="年级"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="subjects" label="科目"></el-table-column> <el-table-column prop="score" label="成绩"></el-table-column> </el-table> </div></template><script>export default { name: 'Table', data() { return { tableData: [ { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文', score: 80 }, { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学', score: 80 }, { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文', score: 70 }, { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '数学', score: 80 }, { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '语文', score: 60 }, { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '数学', score: 60 }, ], mergeObj: {}, mergeArr: ['time', 'grade', 'name', 'subjects', 'score'], }; }, methods: { getSpanArr(data) { this.mergeArr.forEach((key, index1) => { let count = 0; // 用来记录需要合并行的起始位置 this.mergeObj[key] = []; // 记录每一列的合并信息 data.forEach((item, index) => { // index == 0表示数据为第一行，直接 push 一个 1 if(index === 0) { this.mergeObj[key].push(1); } else { // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位 if(item[key] === data[index - 1][key]) { this.mergeObj[key][count] += 1; this.mergeObj[key].push(0); } else { // 如果当前行和上一行其值不相等 count = index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1 } } }) }) }, // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 } objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 判断列的属性 if(this.mergeArr.indexOf(column.property) !== -1) { // 判断其值是不是为0 if(this.mergeObj[column.property][rowIndex]) { return [this.mergeObj[column.property][rowIndex], 1] } else { // 如果为0则为需要合并的行 return [0, 0]; } } } }, mounted() { this.getSpanArr(this.tableData); }};</script><style lang="stylus" scoped>.table height 100vh width 100% padding 40px box-sizing border-box /deep/ .el-table__body tr:hover > td background-color: #fff;</style>2、合并行列

调整下数据，如下：

tableData: [ { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文', score: 80 }, { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学', score: 80 }, { time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 160 }, { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文', score: 70 }, { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '数学', score: 80 }, { time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 150 }, { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '语文', score: 60 }, { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '数学', score: 60 }, { time: '2020-08-11', grade: '总成绩', name: '总成绩', subjects: '总成绩', score: 120 }],

可以看到上面的数据多了一行总成绩，现在的数据在页面显示效果如下：

可以看到总成绩的三个列并没有合并，并不是我们想要的效果，所以需要换一种思路来处理数据

页面的布局也有所调整，如下：

<template> <div class="table"> <el-table :data="tableData" :span-method="objectSpanMethods" border style="width: 100%"> <template v-for="cols in colConfigs"> <!-- 无需合并的列 --> <el-table-column v-if="cols.type === 'label' && !cols.children" :key="cols.prop" :prop="cols.prop" :label="cols.label" > </el-table-column> <!-- 需要合并的列 --> <template v-else-if="cols.type === 'label' && cols.children"> <el-table-column v-for="children in cols.children" :key="children.prop" :prop="children.prop" :label="children.label" /> </template> </template> </el-table> </div></template>

tableData中的数据就是上面调整后的，还需要