vue+element合并单元格后的排序

最新推荐文章于 2024-01-05 09:36:43 发布
最新推荐文章于 2024-01-05 09:36:43 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： 开发 文章标签： vue.js elementui 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54810453/article/details/119904838
版权

平时写的比较少,不好之处多多见谅,纯自己开发重遇到的问题.目的: 使同行少踩些坑(累计经验)

先简单说下合并,如下图

 list就是后台返回的的列表数据, 此代码的需求是根据每行的其中一个字段相同来进行合并的标识,也就是在data里定义的spanArr数组 和 pos 索引 

 

 这个只是如果每行的特定字段(uld)相同合并前5列,如何想合并其他不固定列,如下

 大致就是把想合并列的索引给个数组,然后查询遍历即可

接下来是我们的文章的中心

原因: 合并之后排序的数据合并没有更新(就是还是按照第一次后台返回的列表数据的顺序合并的)

 

 给每次点击排序图标的点击方法里 对数据进行更新处理 tableData 为后台返回的列表数据在 data中定义的数组 此时排序后的列表数据合并会根据排序后的数据进行合并

创作不易,希望更多的帮助大家,如果反馈良好,我会在工作之余继续把之前以及日常的需求和bug陆续发表.话不多说,你们的支持就是我的动力 

ps: 本文为原创, 如果转载或其他 请注明 原创来源  sen

vue table 合并单元格内排序
qq_40599116的博客
02-24 699
<template> <div style="padding:20px"> <el-table :data="tableData6" :span-method="objectSpanMethod" border> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="...
vue element 合并单元格，以及单元格内排序
m0_37656425的博客
09-02 1857
vue element 合并单元格，以及单元格内排序 前提： 后台 做好 排序 （如图1：） 1：合并单元格 ： // 合并单元格 RowSpanMethod({ row, column, rowIndex, columnIndex }) { // columnIndex 代表 预和并的列 if (columnIndex === 1) { // this.tableData 后台传的数据 ...
element UI合并列，并且在合并列之后进行数字排序
qq_41648113的博客
10-28 1647
element UI 合并列后，进行数字排序 最近业务需要实现单元格合并列的功能，并且在第一列用数字进行排序，今天整理了一下实现过程，贡献给在座的各位 实现后的样式如下 直接上代码 html代码 <template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width:
el-table合并行+数据按照相同名称排序+相同名称内的数据在排序
放弃不难，但坚持一定很酷！
09-28 1747
objectSpanMethod 有四个参数分别是 row, column, rowIndex, columnIndex ， 代表的意思是当前行row 当前列column 当前行号rowIndex 当前每一个数据对应的列号columnIndex(6个数据就是6组)if (columnIndex === 0 || columnIndex === 1) 这句话的意思就是第0列 和 第1列的数据需要被合并 合并规则走判断通过的代码。
antdesgin-vue表格合并单元格，且序号根据合并单元格排序
qq_38948398的博客
09-23 2070
先贴效果图 主要使用官方api提供的配置项 customRender: (value, row) => { const obj = { children: value, attrs: {}, }; obj.attrs.rowSpan = row.rowSpan; ret
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
vue动态合并单元格并添加小计合计功能示例
01-22
3、后台返回数据后，整理所需要展示的属性存储到（items）数组内 var obj = { id: curItems[i].id, feeName: curItems[i].feeName, projectName: curItems[i].projectName, projectDetailsName: curItems[i]....
vue+element-ui动态生成多级表头的方法
10-18
`:span-method`属性可能用于处理合并单元格的情况，例如在多级表头中，可能会有需要合并的单元格以呈现更清晰的层次关系。 在实际应用中，你可能还需要处理以下几点： 1. 数据结构的构建：确保数据结构能够正确地...
在 Vue3 + Element Plus 中生成动态表格，动态修改表格，多级表头，合并单元格
热门推荐
蒋川@卡拉云
06-08 1万+
在 Vue 中，表格组件是使用频率及复杂度排名第一的组件，前端经常需要根据后台返回的数据动态渲染表格，比如动态表格如何生成，因为表格的列并不是固定的，在未知表格具体有哪些列的场景下，前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理，比如第一列是日期，需要把相同的日期进行合并，这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云
el-table 合并行和列排序功能
水搁浅了小鱼鱼鱼
11-17 1625
el-table 合并行和列排序功能 在element官方上只有合并列+列排序功能，合并行+列排序并无具体实例。 本篇记录一下此功能的方法 HTML结构如下 <el-table ref="table4" :data="tableData3" :max-height="scrollY2" border style="width: 100%;height:auto;ove
element-ui table 多列组合排序
weixin_43569405的博客
06-07 2457
element-ui table 配合后端实现多列组合排序。 思路： 1.监听sort-change事件，在该事件中缓存和修正当前的排序规则。并根据保存的排序规则调接口刷新表格数据； 2.监听header-cell-class-name事件，在该事件中修正表头排序图标的样式。保证图标的样式逻辑和缓存的排序规则一致。 <el-table :data="pagination.data" ref="multipleTable" class
el-table合并行后加sortable排序（纯前端）
m0_46074266的博客
01-05 945
思路是：通过接口获取到的一维数组，根据对象数组中对象的某个属性值进行拆分成一个二维数组，二维数组内部进行排序，再解构成一维数组，重新计算需要合并行数。相同属性值合并的行是一大类，后面的列升序或降序是指在这每一大类中排序。sortable属性值不能简单的为true需要为’custom'，因为是合并行之后加的排序，所以el-table-column的。el-table组件只有合并列后加排序的，没有合并行后加排序。sort-change方法。el-table需要添加。
element-ui table 多列表头组合排序
qq_41329287的博客
07-06 1116
2.监听header-cell-class-name事件，在该事件中修正表头排序图标的样式。保证图标的样式和缓存的数据一致。1.监听sort-change事件，在该事件中缓存排序规则。
Element el-table合并表格后 序号递增
weixin_43368335的博客
01-06 3853
Element table表格根据某几个字段进行合并例子 比如 十条数据 根据 a b c d四个字段 如果相邻的对象这四个值相同就进行合并 使用:span-method="objectSpanMethod" <el-table :data="data" :highlight-current-row="true" :span-method="objectSpanMethod" > <el-table-column .
element table 根据属性值合并行
Ya_Taylor的博客
05-13 176
element table 根据属性值合并行 要先自行将列表按属性值相同的进行排序 <template> <el-table :data="tableList" style="width: 100%" stripe :header-cell-style="{ background: '#0940A4', color: '#ffffff' }" :span-method="ObjectSp
elementUi表格合并行数据并展示序号
小太阳的博客
11-04 2787
实现合并行思路：需要一个数据来记录需要合并的行数据（数字几就代表合并几行，比如 [1, 2, 0, 1]就是第一行第四行不变，第二三行合并成一行），还要有一个变量来记录数组下标。
element中的表格合并单元格 -- element表格排序 -- form数组表单校验
weixin_43993776的博客
05-16 533
element中的表格合并单元格
vue2的 element 表格单元格合并
qq_44759522的博客
07-18 2225
<template> <div> <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id" ref="tableDom" border> <el-table-column label="序号" width="55" align="center"> <template slo
vue element 合并列表格(当同一列前后相同 合并表格)
weixin_44178762的博客
08-07 2822
rowspan() { // 在data里面定义 this.spanArr = [] // 在data里面定义 this.position = 0 this.dass.forEach((item, index) => { if (index === 0) { this.spanArr.push(1) this.position = 0 // 设置序号 ...
el-table合并单元格后排序会错行 vue
最新发布
12-17
在Vue.js中，`el-table`是一个用于构建表格的组件，它来自Element UI库。当使用`el-table`进行数据展示并设置了单元格合并（通常通过`rowspan`和`colspan`属性来实现），并且尝试对表进行排序操作时，可能会遇到排序结果不符合预期的问题。 这是因为合并后的单元格在渲染时实际上是将数据连接在一起，但是在排序算法内部，它可能还是按单独的单元格处理，导致了实际排序的位置与视觉上显示的行顺序不符。比如，当你按照合并单元格的内容进行升序或降序排序时，可能会发现某些原本相邻的数据在排序后分属不同的行。 解决这个问题的一个常见做法是，在数据处理层面上进行手动排序，确保合并的单元格内容在排序时被视为整体。例如，你可以创建一个新的数组，其中包含完整的、未合并的数据，并在此基础上进行排序，然后返回给`el-table`的数据源。 ```javascript data() { return { tableData: [ // ...原始数据... ], sortedData: [], // 初始化一个空数组来存储排序后的完整数据 }; }, methods: { handleSort(column) { this.sortedData = this.tableData.map(row => { // 将合并的单元格视为整体处理排序 let cellValue = row[column.prop].join(''); return { ...row, [column.prop]: cellValue }; }).sort((a, b) => a[column.prop] > b[column.prop] ? 1 : -1); this.tableData = this.sortedData; // 更新数据源 }, } ``` 在上面的例子中，`handleSort`函数首先将每个合并单元格的内容合并成一个字符串，然后再进行排序。这样可以保证排序效果符合用户预期。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值