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

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

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

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

iview中的table后端排序,页面数据跟接口返回的数据顺序不一致问题_第2张图片
然后需要在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() // 获取列表
      }
    }
}

到这里你的问题就解决啦,评论记得扣个666

你可能感兴趣的:(iview,ui,table,Vue,view,design,前端,vue.js)