在页面中，点击设置按钮在右边出现一个抽屉，在里面控制表头的动态显示与隐藏。当前端使用sortable属性给数据排序后，动态显示或隐藏的表头，会造成数据回到默认状态，不再根据设置的状态排序。具体如下图所示：

为了解决这个问题，我用了很多方法，包括对sort-change、sort-method以及default-sort属性的各种定义使用，但结果都不尽人意。因为当选择显示表头后，要关闭右边弹框，在关闭右边弹框定义的方法里面使用上面三个方法都没有生效，基本上都是因为这几个方法的参数的原因。

后来在想element的table组件，既然点击小按钮会进行排序，那肯定是调用了封装好的排序方法，于是我使this.$ refs.table查看了table组件下的属性和方法。果然，找到了sort()方法该方法需要传两个参数：prop和orde，prop代表的是需要进行排序的列的字段名称，order代表的是需要正序排序还是反序排序，order有三个值：ascending、descending以及null。只需要打开右侧抽屉的时候记录下当前的排序状态，然后在关闭抽屉的时候使用 this.$refs.table.sort( prop , order ) 方法即可实现。

想要拿到打开右侧抽屉前的排序状态的方法有很多，在这里我列举两个：

1. 通过sort-change方法
2. 在打开右侧抽屉的方法中，使用this.$refs.table.columns获取到所有列，然后通过使用filter( ) 方法获取到需要排序的列，然后获取到该列的排序状态。

具体代码我就不展示了，思路已经在上面，代码不是重点，重要的是思路。