iview默认排序序号不变

在iview设置sortable为true时,组件默认排序,如果有分页的话,排序会发生变化,然后想了一种笨方法处理

<Table ref="table" @on-sort-change="sortChange" :columns="columns" :data="data"></Table>
// 表格样式
<script>
// 设置一个全局变量orderNum
let orderNum = 0
export default {
    data () {
        data:[],
        columns: [
          {
              title: '序号',
              type: 'index',
              align: 'center',
              width: 80,
              render: (h, params) {
                 ++orderNum
                 // 利用render排序
                 return h('span', (this.page - 1)*this.limit + orderNum)
              }
           }
        ]
    },
    methods: {
      sortChange () {
          // 每次排序的时候,orderNum从新设置成0,data也需要重新赋值
          // this.$refs.table.rebuildData为排序后的值,不赋值偶尔会出现需要重复现象
          orderNum = 0
          this.data = this.$refs.table.rebuildData
      },
      getData () {
          ...分页获取data时odrderNum重新设置成0,
          后端后返回当前页currPage时,上面this.page替换成this.currPage更加友好
          orderNum = 0
      }
    }
    
</script>

大概方法就是这样了,每次排序时,重新赋值,当然,没有分页的话,直接设置type:index这种情况排序序号不发生变化哈

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值