Vue el-table的自定义排序返回值为null，设置刷新页面保持排序标志，导航时elementui组件不更新

在Vue中使用Element UI的el-table组件时，如果自定义排序函数返回null，并希望在刷新页面或导航时保持排序状态，可以通过以下步骤实现：

1. 监听路由变化，如果路由发生变化，需要恢复之前的排序状态。
2. 使用Vuex或者全局状态管理来保存排序状态。
3. 在自定义排序函数中，如果状态管理中有排序状态，则应用该状态。

以下是一个简化的示例：

// Vuex store
const store = new Vuex.Store({
  state: {
    sort: {
      prop: 'defaultProp', // 默认排序字段
      order: 'ascending'   // 默认排序方向
    }
  },
  mutations: {
    setSort(state, sort) {
      state.sort = sort;
    }
  }
});
 
// Vue 组件中
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentSort: {
        prop: '',
        order: ''
      }
    };
  },
  computed: {
    sort: {
      get() {
        return this.$store.state.sort;
      },
      set(value) {
        this.$store.commit('setSort', value);
      }
    }
  },
  watch: {
    // 监听路由变化，恢复排序状态
    '$route': {
      handler: function(route) {
        this.tableData.sort(this.customSort);
      },
      immediate: true
    }
  },
  methods: {
    customSort(a, b) {
      const sort = this.sort;
      if (sort.prop && sort.order) {
        // 根据状态管理中的排序状态进行排序
        if (sort.order === 'ascending') {
          return a[sort.prop] - b[sort.prop];
        } else if (sort.order === 'descending') {
          return b[sort.prop] - a[sort.prop];
        }
      }
      return 0; // 默认排序逻辑
    }
  }
};

在这个示例中，我们定义了一个Vuex store来保存排序状态，并在组件的计算属性中获取和设置这个状态。同时，我们监听路由变化，在路由变化时应用自定义排序函数。如果状态管理中有排序状态，则根据状态进行排序，否则使用默认逻辑。这样，即使页面刷新或导航到其他页面后回来，表格也会保持之前的排序状态。