iview中的table后端排序,页面数据跟接口返回的数据顺序不一致问题

Э时间行者于我

于 2023-03-15 15:47:24 发布

阅读量564

点赞数

分类专栏： Iview UI Vue 文章标签： view design 前端 vue.js

本文链接：https://blog.csdn.net/qq_45094682/article/details/129557605

版权

Vue 同时被 2 个专栏收录

55 篇文章

订阅专栏

Iview UI

6 篇文章

订阅专栏

当使用iview的table进行自定义排序(custom)时，需注意设置sortable属性，并添加on-sort-change事件处理排序方法。在changeSort方法中根据column的key和order调整排序逻辑，例如处理退货比例的排序，然后调用getList方法更新列表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iview中的table sortable排序时,发现页面数据跟接口返回的数据顺序不一样

iview table

{
   title: '退货比例',
   // sortable: true, // 错误写法
   sortable: 'custom', // 正确写法
   key: 'refundrate'
 }

iview
然后需要在table上加上排序方法就可以了
@on-sort-change='changeSort'

<Table border stripe highlight-row ref="tb" :loading="loading" :columns="tableColumns"
	 :data="tableData" @on-selection-change="selectionChange" class="commonTable"  
	 @on-sort-change='changeSort'>
 </Table>

methods: {
	// 根据排序 desc或asc
    changeSort({ column, key, order }) {
      if (key === 'refundrate') { // 退货比例
        if (order === 'normal') {
          this.args.order = 'rate desc'
        } else {
          this.args.order = `rate ${order}`
        }
        this.getList() // 获取列表
      }
    }
}