elementui表格根据后端返回的数据进行合并表格

害嗨海大家好，我又回来了。最近有小伙伴问了我这样一个问题，就是现在我调取接口，获取了一批表格数据，然后显示在页面上，但是要根据每行的id以及那一列的内容进行合并，然后还有添加子数据，编辑删除等操作（这里只说合并表格）

直接上图，直接渲染则是这个样子

需求：根据职业id合并行，第一列和最后一列都要合并，这要怎么做呢？首先上template代码，这个没什么说，就是个el-table，操作那一列就是个作用域插槽

<template><div><el-table :data="tableData" :span-method="spanMethod"><el-table-column prop="job" label="职业id"></el-table-column><el-table-column prop="ename" label="名字"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-column label="操作"><template><el-button type="success" icon="el-icon-edit" size="mini"></el-button><el-button type="danger" icon="el-icon-delete" size="mini"></el-button></template></el-table-column></el-table></div>
</template>

其中，既然要合并单元格，我们当然要用到span-method了，翻译就是表格合并的方式。在html中，我们学习了rowspan和colspan，合并行和合并列。

下面就要写script的内容了，二话不说，直接上代码

<script>
export default {data() {return {tableData: [{job: 1,ename: "咕叽咕叽",age: 21},{job: 1,ename: "哆啦哆啦",age: 22},{job: 2,ename: "后端1",age: 27},{job: 2,ename: "后端2",age: 21},{job: 2,ename: "后端3",age: 22},{job: 3,ename: "主管1",age: 27},{job: 3,ename: "主管2",age: 28},{job: 4,ename: "总监",age: 28},]}},methods: {//合并的方法，里面row，colomn是这一行这一列的对象，rowIndex和colIndex就是行列的index  从0-n  rowspan表示合并的行 大于1表示要往下合并了，然后下方被合并的rowspan就是0，0代表被合并了，1代表正常情况spanMethod({ row, column, rowIndex, columnIndex }) {//columnIndex代表哪几列需要合并，后面会用let columnArr = [0, 3]let jobArr = [];  //所有职业id  从第一个数据到最后一个for (let k in this.tableData) {jobArr.push(this.tableData[k].job)}let obj = {}for (let i = 0; i < jobArr.length; i++) {if (obj[jobArr[i]] == undefined) {obj[jobArr[i]] = 1} else {obj[jobArr[i]]++}}console.log("obj", obj);   //包含每个id以及其出现的次数，为后面合并做铺垫let spanArr = [];  //每一行就是一条数据，该数组每一个值就是当前行的rowspan数let doneArr = []   //保存被合并了的id，如果再出现，表示被合并for (let i = 0; i < jobArr.length; i++) {//看看个数if (doneArr.includes(jobArr[i])) {//如果这个id被合并过了，说明刚刚上方有一样的id，这一项就是被合并的spanArr.push(0)} else {//如果没合并，就往下合并，spanArr里推入这个id的个数，在obj中就有spanArr.push(obj[jobArr[i]])//别忘了合并完把id放进doneArr中doneArr.push(jobArr[i])}}//如果是第0列和第3列if (columnArr.includes(columnIndex)) {//遍历合并个数的数组for (let i = 0; i < spanArr.length; i++) {//如果是该行，行合并个数就是这一项的值，列不合并，所以是1if (rowIndex == i) {return {rowspan: spanArr[i],colspan: 1}}}}}},
}
</script>

rowspan表示合并的行，大于1表示要往下合并了，因此下方被合并的rowspan就是0，0代表被合并了，1代表正常情况（即不合并）

实际工作数据会更复杂，这个时候，需要合并的列/行就放在一个数组里，然后通过includes来判断这一列/行是否需要被合并。再算出spanArr(每一行需要合并的个数组成的数组)，然后返回。

最后得出图如下

这就解决了问题，快去试一试吧！

elementui表格根据后端返回的数据进行合并表格相关推荐

ajax传回的数据做表格,Datatables ajax返回的数据顺序与表格中的数据顺序不一致...
项目中Datatables是采用Ajax作为数据源的,当ajax返回数据后,我查看ajax返回的数据发现,ajax返回的数据顺序与datatables表格中显示的数据顺序不一致,请问如何才能这两者显示 ...
java后端返回json_Java后端返回Json数据
Java后端返回Json数据 Jackson 导包 com.fasterxml.jackson.core jackson-databind 2.12.1 创建ObjectMapper对象,调用writ ...
响应后端返回的数据，如何将数据展示出来
通过后端给的接口,连接后端,进而获取数据,并将获取的数据展示在表格中去.下面是本人自己做的一个简单的案例,如果有什么问题或更简洁的方法,欢迎讨论. 先看下效果图,是否理想的样子: 其源代码,含有详细的 ...
通用Excel表格导出（Map类型数据导出为表格）
背景为提升代码开发效率,项目使用了通用查询(动态数据表.动态条件.动态列名等),各表查询通过同一个页面展现,前端通过获取路径上的表名调用同一个后端控制器--动态获取到查询条件.数据列名.不同表数据等 ...
matlab筛选表格数据导出,excel表格里怎么将筛选数据导出-Excel表格在进行筛选，我如何可以导出所有筛选出来......
如何将EXCEL表格中筛选出来的数据一次性复制到另一... 使用数据透最方便下据为例: 步骤1:选择A1单元格,插入>>>数据透视表,再单击定"按钮,如下图步骤2:勾选& ...
excel表格内容拆分_表格技巧—Excel 多行数据拆分合并的方法
在我们实际工作中经常会遇到需要拆分数据及合并数据的情况,当表格内容不多时手动进行合并拆分并不难,但是多行数据需要进行拆分合并时应当如何快速操作呢?今天我们一起来学习Excel多行数据的拆分合并. 首先 ...
vue前端怎么下载后端返回的二进制流excel表格文件
文章目录应用场景一.怎么请求接口二.步骤图片 1.res返回数据 2.url地址 3.download属性 4.a标签 5.返回的原式数据,长这样总结应用场景我对表格数据进行勾选,想要把勾 ...
JS 处理后端返回大量数据
先说场景在用uniApp 开发小程序时遇到后端有一个接口一次性返回了超100条数据此时在前端写的代码 this.swiperList = res.data ; 直接导致微信小程序报警如图这样 ...
浪迹天涯king教你用elementui做复杂的表格，去处理报表数据（合并表头，合并表体行和列）
1.不用多说了,先上图片 2.功能特性 1.表头的背景色,标题的虚线边框 2.表头的个别单元格样式 3. 表头合并行功能 4. 复杂的动态表头功能 5. 表体渲染下标从第n行开始 6. 表体第一行,第 ...

elementui表格根据后端返回的数据进行合并表格

elementui表格根据后端返回的数据进行合并表格相关推荐

最新文章

热门文章