el-table 加上排序之后 出现显示的数据与返回的数据的顺序不一致的问题

我的列表的列是循环的出来的 前面可以排序的都吗没有问题 就只有其中一个排序出现列表显示的顺序与后端返回的数据的顺序不一致

 <el-table :data="dataList"
           ref="multipleTable"
           @sort-change="sortChange">
    <template v-for="(item,index) in colList.dispfields">
          <el-table-column
             :sortable="item.isorder==='yes'"
             >
          </el-table-column>
   </template>
</el-table>

之前的写法是这个样子的 很多循环出来的都是正常的 只有其中一个显示的顺序是错误的 

不知道为什么 查了文档说:

如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据

然后代码改成这样就好了

<el-table :data="dataList"
           ref="multipleTable"
           @sort-change="sortChange">
    <template v-for="(item,index) in colList.dispfields">
          <el-table-column
             :sortable="item.isorder==='yes'?'custom':false"
             >
          </el-table-column>
   </template>
</el-table>

远程请求的时候 sortable 需要设置成 custom

虽然不知道为啥但是文档就是这样写的 哈哈哈哈哈 那就先这样吧

<think>好的,用户的问题是关于element-ui的el-table组件中,当某列存在空值时排序出现错乱的情况。我需要先理解问题背景,然后根据提供的引用信息来寻找解决方案。 首先,用户提到在el-table中使用sort-change事件时,当出现空值,排序显示顺序和后端传值符。这可能是因为默认的排序方法无法正确处理空值,导致它们被错误地排在前面或后面。根据引用[3]和[5],用户已经尝试过自定义排序,但遇到空值问题。引用[5]提到可以参考一个Stack Overflow的解决方案,使用lodash的orderBy函数处理嵌套的空值,并在此基础上扩展。 接下来,我需要整理解决方案的步骤。首先,用户需要为el-table-column设置sortable属性为custom,并监听sort-change事件。然后在事件处理中,使用自定义的排序方法,比如lodash的orderBy,并处理空值的情况。可能需要将空值视为最大值或最小值,根据需求调整。同时,引用[1]中提到给el-table-column添加key可以解决渲染问题,但这里的问题主要是排序逻辑,所以重点在排序处理。 另外,引用[4]提到在表格公用时逻辑的调整,但当前问题更专注于排序。因此,解决方案应集中在自定义排序函数上。需要确保在排序方法中正确处理空值,可能将它们排在最后或最前。同时,用户可能需要参考引用[5]的代码示例,结合lodash的方法来实现。 最后,总结解决方案的步骤,并提醒用户注意key的使用,确保渲染正确。同时,可能生成相关问题,比如如何动态处理同类型的表格数据,或者优化el-table的性能,这些也是引用中提到的常见问题。</think>针对element-ui的el-table空值排序错乱问题,可通过以下步骤解决: ### 解决方案 1. **自定义排序函数** ```html <el-table :data="tableData" @sort-change="customSort"> <el-table-column prop="score" sortable="custom" :sort-orders="['ascending', 'descending']" label="成绩"> </el-table-column> </el-table> ``` 2. **处理空值逻辑** ```javascript import _ from 'lodash'; methods: { customSort({ column, prop, order }) { this.tableData = _.orderBy( this.tableData, [item => { const val = item[prop]; return val === null || val === undefined ? Infinity : val; // 空值置后 // 若需空值置前则使用 -Infinity }], [order === 'ascending' ? 'asc' : 'desc'] ); } } ``` 该方法利用lodash的`orderBy`方法,将空值映射为极大值(Infinity)或极小值(-Infinity)[^5] 3. **添加key标识** 给存在动态排序的列添加唯一key,避免Vue复用DOM导致渲染异常: ```html <el-table-column :key="'score-col-' + Date.now()" prop="score" ...> </el-table-column> ``` 通过时间戳强制重新渲染列组件[^1] ### 原理说明 ElementUI的默认排序算法无法正确处理空值,通过自定义排序函数可实现: - 空值统一映射为极值 - 支持多字段嵌套排序 - 兼容数字/字符串混合类型 当排序字段存在`null`/`undefined`时,Infinity映射能保证: $$ null \rightarrow \infty \quad \text{或} \quad null \rightarrow -\infty $$ 在排序序列中形成明确的位置锚点
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值