Element-UI table排序问题

项目需求：选择框与表格的排序列双向绑定

选择器：

表格 表头行：

<!-- 选择器 -->
<el-select v-model="metricValue" placeholder="请选择">
  <el-option>
  ...
  </el-option>
</el-select>
<!-- table -->
<el-table
  ref="singleTable"
  :data="tableData"
  :default-sort="tableAttribute.sortMethod"
  @sort-change="changeTableSort">
</el-table>

思路：
table -> select 利用changeTableSort方法可以直接控制选择器的值（略掉。。。）
select -> table 利用table的ref属性修改table的排序列（table的default-sort属性只能执行一次，如果第二次赋值tableData不会再次读，所以需要利用ref）

methods: {
  getTableData: function () {
    var _this = this
    // 清空排序 重新赋值
    _this.$refs.singleTable.clearSort()
    for (let i of _this.$refs.singleTable.columns) {
      if (i.property === _this.tableAttribute.sortMethod.prop) {
        i.order = _this.tableAttribute.sortMethod.order
      } else {
        i.order = ''
      }
    }
  }
},
watch: {
  metricValue: function (newVal, oldVal) {
    if (oldVal) {
      this.tableAttribute.sortMethod.order = 'descending'
      this.tableAttribute.sortMethod.prop = newVal
      this.getTableData()
    }
  }
}