在没用外用组件的情况下通过原生解决数据排序问题
直接上代码
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的博客