针对性能优化 （sort只用一次）
<template>
<div>
<h2>考试</h2>
<div>
<!--<input v-model="searchInfo.queryInfo" @input="queryChange" type="text" placeholder="商品名称" >-->
<input v-model="searchInfo.queryInfo" type="text" placeholder="商品名称" >
</div>
<table>
<tr>
<th>编号<arrow @click.native="idSortArr" :status="idSortStatus"></arrow></th>
<th>名称</th>
<th>价格<arrow @click.native="priceSortArr" :status="priceSortStatus"></arrow></th>
</tr>
<tr v-for="(item, index) in contentData" :key="item.id">
<td>{
{
item.id}}</td>
<td>{
{
item.goods_name}}</td>
<td>{
{
item.price}}</td>
</tr>
</table>
<page></page>
</div>
</template>
<script>
import page from "./components/page";
import arrow from "./components/Arrow.vue";
import data from "./assets/data";
export default{
components: {
page,
arrow
},
created(){
this.res = data.data;
// this.contentData = this.res;
console.log("data===>",this.res)
},
data(){
//Desc 降序 asc 升序
return {
res: null,
searchInfo: {
queryInfo: "",
pageSize: 10,
pageNum: 1,
},
sortWay: "desc",
sortBy: "id", //id price
}
},
methods:{
queryChange(){
console.log("queryChange", this.searchInfo.queryInfo);
let queryStr = this.searchInfo.queryInfo;
/*let newData = [];
for(let i=0;i<this.res.length;i++){
let item = this.res[i];
if(item.goods_name.indexOf(queryStr) !== -1){
newData.push(item)
}
}
this.contentData = newData;*/
/*this.contentData = this.res.filter((item)=>{
if(item.goods_name.indexOf(queryStr) !== -1){
return item
}
})*/
},
idSortArr(){
/*
根据点击事件来判断当前是根据id排序还是价格排序的
*/
// this.sortBy === 'price'
this.sortBy = 'id'//点击时状态为id时进行id排序
if(this.sortWay === "desc"){
//状态为价格时变为未知状态即为空
this.sortWay = "asc"
}else {
//否则就是价格状态
this.sortWay = "desc"
}
// this.sortArr();//每次点击都要调用一排序
},
priceSortArr(){
this.sortBy = "price"//点击时状态为price时进行价格排序
if(this.sortWay === "desc"){
this.sortWay = "asc"
}else {
this.sortWay = "desc"
}
// this.sortArr();
},
//排序方法封装
sortArr(){
this.res.sort((a, b)=>{
return (a[this.sortBy] - b[this.sortBy]) * (this.sortWay === "desc" ? -1 : 1)
});
}
},
computed:{
contentData(){
let resData = this.res;
//查找过滤
let queryStr = this.searchInfo.queryInfo;
resData = this.res.filter((item)=>{
if(item.goods_name.indexOf(queryStr) !== -1){
return item
}
});
resData.sort((a, b)=>{
return (a[this.sortBy] - b[this.sortBy]) * (this.sortWay === "desc" ? -1 : 1)
});
return resData
},
idSortStatus(){
if(this.sortBy === "id"){
return this.sortWay === "desc"? "up" : "down"
}else{
return "none"
}
},
priceSortStatus(){
if(this.sortBy === "price"){
return this.sortWay === "desc"? "up" : "down"
}else{
return "none"
}
}
}
}
</script>