在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这种情况排序序号不发生变化哈