ant design table 多列排序，后端返回数据不刷新问题

榴莲lua

已于 2022-02-09 11:39:35 修改

阅读量1.6k

点赞数

分类专栏： react antd design 文章标签：前端 typescript

于 2022-02-09 11:31:47 首次发布

本文链接：https://blog.csdn.net/weixin_41458007/article/details/122837763

版权

在使用Ant Design Table时遇到多列排序问题，当三列排序后，再次点击某一列排序，虽然后端返回了更新的数据，但前端数据源未重新渲染。初步推测是由于`multiple`设置的优先级问题，尝试通过修改`multiple`值为100来调整排序优先级，但未成功。后来发现可以通过自定义`compare`逻辑来解决，注释掉原有的`compare`设置后，问题得到完美解决。

摘要由CSDN通过智能技术生成

ant design table 多列排序，后端返回数据不刷新问题
如图，表格有三列排序，当三列都点了排序后，再返回点击第二列“点击”字段升序排序，后端数据返回显示已更新，但是前端datasource未做重新渲染
代码如下

 item.sorter = obj[0]?.sortType ? {
   
	 compare: (a: {
    codeInit: number; }, b: {
    codeInit: number; }) => a<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

榴莲lua

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react 的table后端排序

qq_40139254的博客

12-05

1371

** 被虐的有点累,但还是要像对待初恋一样对待它(代码虐我千百遍,我待代码如初恋) ** 直接上代码了首先是sorter的受控模式的onChange,不明白的可以看一下ant design的官网,代码如下 onChange的写法 onChange_2 = (pagination,filters,sorter,extra) =>{ let { dispatch} = this...

antd表格添加数据不更新_react.js antd-table 可编辑表格验证

weixin_39914049的博客

03-03

439

import React, { useState, useEffect } from 'react'import { Form, Button, Input, Modal, Select, Row, Col, DatePicker, Table } from'antd'import styles from'./style.less'const UpdateForm: React.FC= (prop...

参与评论您还未登录，请先登录后发表或查看评论

数据更新后Ant Design Table组件界面未刷新怎么解决？

最新发布

南城

06-01

1063

在使用Ant Design的Table组件时，我们时常需要动态更新表格数据以满足应用需求。然而，有时即使数据已经更新，界面却没有进行相应的刷新。它确保当数据更新时，React能够准确判断哪些行发生了变化，并据此进行最小化的DOM操作。属性是确保Ant Design Table组件在数据更新后能够正确进行界面刷新的关键。如果确实需要使用索引作为临时解决方案，请确保这些操作不会影响到最终展示给用户的数据顺序。通过避免常见问题并采用合适的方法，我们可以提高Table组件的渲染性能和稳定性，为用户提供更好的体验。

logistic回归分析优点_机器学习实战项目-Logistic回归

weixin_39812577的博客

11-21

554

Logistic 回归概述Logistic 回归虽然名字叫回归，但是它是用来做分类的。其主要思想是: 根据现有数据对分类边界线建立回归公式，以此进行分类。须知概念Sigmoid 函数回归概念假设现在有一些数据点，我们用一条直线对这些点进行拟合(这条直线称为最佳拟合直线)，这个拟合的过程就叫做回归。进而可以得到对这些点的拟合直线方程，那么我们根据这个回归方程，怎么进行分类呢？请看下面。二值型输出...

antd表格添加数据不更新_antd 通过弹出框填写数据更新至table中首次添加table中缺少部分信息...

weixin_30980025的博客

01-26

993

antd的UI 通过弹出框以编辑相应数据 => 确认添加 => table更新添加数据中无name数据// 新建const CollectionCreateForm = Form.create()((props) => {const {visible, onCancel, onCreate, form} = props;const {getFieldDecorator} = fo...

Ant Design Pro使用笔记

journeyIT的博客

03-02

1873

一、安装 dva-cli cnpm install dva-cli -g 二、创建应用 dva new dva-project 三、启动应用 cd dva-project npm start 四、安装并使用antd cnpm install antd babel-plugin-import --save 编辑.webpackrc，使babel-plugin-impor...

datagrid vue_类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件（el-datagrid）...

weixin_39680678的博客

12-19

1304

背景element-ui 中的 el-table 组件只提供了数据展示，而分页功能作为一个单独的组件 el-pagination，并没有像 Ant Design 一样集成到 el-able 组件中，并且每一个数据列也都是一个单独的组件 el-table-column。在开发过程中就出现了一个很明显的问题：业务中的大部分数据表格功能都类似，数据列通常在3-6个不等，且都需要分页，前端分页与后端分页的...

Vue 后台实战篇之Element UI

itKingOne的博客

09-20

9442

Element 去年十月份开始用 vue 做管理后台的时候毫不犹豫的就选择了 Elemen，那时候 vue2 刚发没多久，市面上也没有很多其它的 vue2 的 ui 框架。虽然 Element 也有很多的不足，前期的 bug 也不少，但我还是选择了它，说一下我选择 Element 的原因吧：有大厂背书 : 虽然核心开发只有三个人，但至少不用担心哪天就不维护，带着小姨子跑路了。持续迭代

2022年面试，整理全网初、中、高级常见 Java 面试题

q66562636的博客

07-01

2349

面试题答案见微信小程序 “Java 精选面试题”，3000 + 道面试题。内容持续更新中包含基础、集合、并发、JVM、Spring、Spring MVC、Spring Boot、Spring Cloud、Dubbo、MySQL、Redis、MyBaits、Zookeeper、Linux、数据结构与算法、项目管理工具、消息队列、设计模式、Nginx、常见 BUG 问题、网络编程等。————————————————面向对象编程有哪些特征？一、抽象和封装类和对象体现了抽象和封装抽象就是解释类与对象之间关系的词。类

antd表格添加数据不更新_elementUI中的Table组件tableData数据变化后，表格不会重新渲染怎么办...

weixin_39926540的博客

12-31

1618

需要实现多语言，点击切换语言按钮后，表格数据也实时变化请求后台时获取的数据中就包含英文名称和中文名称，根据目前前台所保存的语言类型，判断给tabledate赋英文名称还是中文名称；切换语言时，tabledate的值可以能做到改变，但是table组件中的值并没有发生变化，这是为什么；下面是我的代码，谢谢各位queryGameApi(this.category, this.sportType, thi...

Ant-Design组件中，在Modal 中加入Table组件，为什么Modal 关闭时，Table中数据不会更新重新渲染？有什么方法可以让表格中的数据重新渲染？

yqdid的博客

07-24

1466

在Ant Design的Modal组件中，关闭Modal时，Table组件中的数据不会重新渲染的原因是，Modal组件默认是通过隐藏和显示来实现显示和关闭的，而不是通过销毁和重新渲染组件。以上方法中，可以根据具体情况选择适合的方法来让表格中的数据重新渲染。

antdv的表格更新，但是表格中的select下拉框显示数据不更新的问题

qq_30819871的博客

07-29

1725

表格数据使用深拷贝的方式也没有触发更新效果，同事建议我使用this.$forceUpdate()方法来加上以后的确管用了，但是查了一下文档，说这个方法比较暴力，不建议使用然后我又翻了一下文档，发现select组件里面有change方法来监控绑定的value值，所以我尝试在change方法里面去更新数据，结果是可以的，这个方法可以不用暴力更新的方式来处理这个问题 ...

弹窗里面显示表格打开一次后，以后table不会变化（刷新）的问题

qq_46490956的博客

02-21

1275

弹窗里面显示表格打开一次后，以后table不会变化（刷新）的问题

Antd Table组件实现后端多列排序Bug

znhyXYG的博客

08-11

907

Antd Table组件实现后端多列排序Bug

【Antd】Table内容强制刷新

你，若盛开的专栏

02-15

5914

借助key的不同来实现 <Table key={Math.random()*10} ...

【ant-table绑定值变化页面不更新，报错Cannot read properties of undefined (reading ‘__asyncLoader‘)】

trabecula_hj的博客

01-09

3689

问题背景： vue3项目中使用ant-design-vue中的a-table,data-source绑定值为"tableData"，页面加载时调用接口获得tableData显示正常，当输入筛选条件重新搜索后获得新的tableData，此时打印tableData值已经更新，但是页面没有变化，并报错误。

ant design中table表格提交数据刷新问题

热门推荐

Sara0064的博客

12-23

1万+

问题描述：在ant design 中table表格中添加一条新的记录，但是表格不刷新数据，第二次提交才刷新出第一条的数据。解决方法：在app.vue中写 provide(){ return { reload: this.reload } methods中： reload() { this.isRouterAlive = false`在这里插入代...

antd-vue table列排序

string佳佳的博客

03-04

1071

效果图：实现方法： data: columns:[ { title: '创建时间', width: '110px', align: 'center', dataIndex: 'createDate', sorter: (a, b) => { let result = 0 for (let i = 0; i < a.createDate.length; i++) { if (a.crea

antdesign表格(table)如何开启列排序

weixin_49203377的博客

05-12

3096

antdesign表格如何开启列排序 1.本地数据排序 column数据设置里面，需要开启列设置sorter,用sorter自定义排序规则和方法汉字：{ title: ‘汉字’, dataIndex: ‘name’, sorter:(a,b) => a.name.localeCompare(b.name) },注：stringObject.localeCompare(target)target参数：要以本地特定的顺序与 stringObject 进行比较的字符串。返回结果：说明比较结果的数字。如果

ant design chart中如何调用后端接口数据

03-29

Ant Design Chart 是基于 G2Plot 封装的 React 图表库，可以通过调用后端接口获取数据。具体步骤如下： 1. 在组件中引入 axios 或其他 HTTP 请求库。 2. 在组件中定义一个函数，用于调用后端接口并获取数据。例如： ``` async function fetchData() { const response = await axios.get('/api/data'); const data = response.data; return data; } ``` 这个函数使用 axios 发送 GET 请求，请求后端接口 /api/data，然后将返回的数据存储在变量 data 中，最后返回 data。 3. 在组件的 state 中定义一个变量，用于保存从后端接口获取的数据。例如： ``` const [chartData, setChartData] = useState([]); ``` 这个变量初始值为空数组，后面会在调用 fetchData 函数时更新。 4. 在组件的 useEffect 中调用 fetchData 函数，并将返回的数据存储在 chartData 中。例如： ``` useEffect(() => { fetchData().then(data => { setChartData(data); }); }, []); ``` 这个 useEffect 在组件挂载时执行，调用 fetchData 函数，并在 fetchData 函数返回数据后更新 chartData。 5. 在 Ant Design Chart 中使用 chartData 变量作为数据源。例如： ``` <LineChart data={chartData} /> ``` 这个 LineChart 组件将使用 chartData 变量作为数据源绘制图表。