当使用<vxe-grid>组件时,利用sort()方法对某一列进行数据的实时排序
<template> <vxe-grid ref="userGrid" :columns="tableColumn" :data="tableData" > </vxe-grid> </template> <script> methods: { realTimeSort(){ // 实时排序 var sortColumnData = this.$refs.userGrid.getSortColumns() // 获取需要排序的列 this.$refs.userGrid.updateData() // 更新排序的数据 this.$refs.userGrid.sort(sortColumnData.property, sortColumnData.order) // 排序 }, getTableData(){ // 从后台实时获取数据 ...... this.realTimeSort() } } </script>
当表格数据变化时,利用getTableData()函数可以发现表格在实时变化。但就算表格数据在实时变化,如果在每次获取表格数据后利用sort()进行排序也不能实现实时排序,必须在排序前加updateData()函数才能实现实时排序。
个人认为可能是第一次点击排序时就记下了那个时间点的表格数据,以后每次调用也都是利用该时间点的表格数据进行排序,因此不能实现实时排序,而调用updateData()函数便更新了排序使用的表格数据。