vue 处理 数据排序问题

在没用外用组件的情况下通过原生解决数据排序问题
直接上代码
html（代码可能有些冗余，请大神们忽略）

 <div>
   <div class="all">
     <span style="flex:2">总计</span>
     <span style="flex:1">--</span>
     <span :title= tableAll.zdmj style="flex:2">{{tableAll.zdmj}}</span>
     <span style="flex:2">--</span>
     <span :title= tableAll.zdzj style="flex:3">{{tableAll.zdzj}}</span>
     <span :title= tableAll.jzmj style="flex:3">{{tableAll.jzmj}}</span>
     <span style="flex:2">--</span>
     <span :title= tableAll.jzzj style="flex:3">{{tableAll.jzzj}}</span>
    </div>
    <div v-for="(i,k) in tableList" :key="k">
     <span :title= i.name style="flex:2">{{i.name}}</span>
     <span :title= i.storey  style="flex:1">{{i.storey}}</span>
     <span :title= i.land_area/100 style="flex:2">{{(i.land_area/100).toFixed(0)}}   </span>
     <span :title= i.land_unit_price/100 style="flex:2">{{(i.land_unit_price/100).toFixed(0)}}</span>
     <span :title= i.land_area*i.land_unit_price/10000 style="flex:3">{{(i.land_area*i.land_unit_price/10000).toFixed(2)}}</span>
     <span :title= i.build_area/100 style="flex:3">{{(i.build_area/100).toFixed(0)}}</span>
     <span :title= i.build_unit_price/100 style="flex:2">{{(i.build_unit_price/100).toFixed(0)}}</span>
     <span :title= i.build_area*i.build_unit_price/10000 style="flex:3">{{(i.build_area*i.build_unit_price/10000).toFixed(2)}}</span>
    </div>
</div>

script

data() {
    return {
    	tableList: [], //表格列表
      	sortList:[], //排序列表
      	sort:{
        zm : [],
        zz : [],
        jm : [],
        jz : [],
      },
    };
  },



  // 发请求拿数据
  this.$http.get(api.tableList() + "?id=" + id).then(res => {
     this.tableList = res.ret;
     this.sortList = res.ret;
     let zm = 0;
     let zz = 0;
     let jm = 0;
     let jz = 0;
     for (let i = 0; i < res.ret.length; i++) {
       zm = zm + res.ret[i].land_area / 100;
       zz = zz + res.ret[i].land_unit_price * res.ret[i].land_area;
       jm = jm + res.ret[i].build_area / 100;
       jz = jz + res.ret[i].build_unit_price * res.ret[i].build_area;
     }
     this.tableAll.zz = (zz / 10000).toFixed(0);
     this.tableAll.zm = zm.toFixed(0);
     this.tableAll.jm = jm.toFixed(0);
     this.tableAll.jz = (jz / 10000).toFixed(0);
     this.tableName = name;
     this.tableShow = !this.tableShow;
    }

通过
return this.sortList.sort((a,b)=>a.land_area-b.land_area); 实现排序

//我是通过点击事件进行的排序
事件名(){
      return this.sortList.sort((a,b)=>b.land_area-a.land_area); //降序
    },

ps：代码冗余，请大神们忽略，技术上的问题请各位大神多多指教（element UI 组件库里面有封装好的排序 附上网址）
部分技术引用yangbaobao的博客