vue 条件筛选 排序（二）
和 “vue页面传参$route 编辑 预览” https://blog.csdn.net/qq_39109182/article/details/81045243 页面一样，只不过数据换成v-for 循环出来
html 部分
ID
标题
姓名
手机
时间
总价
↑
↓
头像
操作
{{item.id}}
{{item.title}}
{{item.peo}}
{{item.tel}}
{{item.dataTimes}}
{{item.money}}万
![]()
预览
修改
删除
Js部分
export default {
data() {
return {
url:"/static/list.json" , //数据接口
testpage: [],
currentPage:1,//
pagesize:5,//每页显示条数
msg:'',
id:'',
peo:'',
tel:'',
dataTimes:'',
yName:'',//筛选输入框的值
d_sort:'', //默认不排序
newSort:false,//默认从小到大排列
}
},
created(){
this.getData();//初始数据列表
},
methods: {
//获得表格数据
async getData(){
let dangqian = this;
let dizhi = await dangqian.$axios.get(dangqian.url);
dangqian.testpage = dizhi.data.imgListData;
console.log(dangqian.testpage);
//dangqian.sou(dangqian.testpage.numId);
},
//修改
xiugai(index, row) {
this.$message('修改第'+(index+1)+'行');
let pageNum=this.pagesize;//每页数据个数
let yeNum=this.currentPage;//第几页
console.log(yeNum)
let zhi = this.testpage[index+pageNum*yeNum-pageNum];//得到当前行的数据
this.$router.push({name: 'bianji',params:{num:zhi}})
//跳转到修改的页面
},
///删除 这里是假的删除
deleteRow(index, row) {
this.$message.error('删除第'+(index+1)+'行');
//let iList = row;
//console.log(iList)
let pageNum=this.pagesize;//每页数据个数
let yeNum=this.currentPage;//第几页
console.log(yeNum)
//let zhi = this.testpage[index+pageNum*yeNum-pageNum];
//let iList = this.testpage[index+pageNum*yeNum-pageNum];
//console.log(iList)
row.splice(index+pageNum*yeNum-pageNum,1)
},
///分页 初始页currentPage、初始每页数据数pagesize和数据testpage
handleSizeChange:function(size){
this.pagesize=size;
},
handleCurrentChange:function(currentPage){
this.currentPage=currentPage;
},
///分页End 初始页currentPage、初始每页数据数pagesize和数据testpage
//排序
orderFn(d_sort,newSort){
this.d_sort = d_sort;
this.newSort = newSort;
},
},
computed:{
筛选
testpage2: function(){
var _this = this;
//逻辑-->根据input的value值筛选testpage中的数据
var arrByZM = [];//声明一个空数组来存放数据
for (var i=0;i升序降序排列 false: 默认从小到大 true：默认从大到小
//判断，如果要d_sort不为空，说明要进行排序
if(this.d_sort != ''){
arrByZM.sort(function( a , b){
if(_this.newSort){
return b[_this.d_sort] - a[_this.d_sort];
}else{
return a[_this.d_sort] - b[_this.d_sort];
}
});
}
//返回筛选后的数据
return arrByZM;
}
}
} json格式
{
"imgListData": [{
"id": "1",
"title": "标题",
"content": "内容 ",
"city": "城市",
"adrs": "地址描述",
"room": "文字描述",
"imgUrl": "图片地址 ",
"dataTimes": "日期",
"peo": "姓名",
"tel": "手机号",
"pho": "img的src地址",
"money": "总价格",
"unitprice": "单价",
"state": "状态",
"gender": "性别",
"tag": [
{
"tags": "标签一"
},
{
"tags": "标签七"
},
{
"tags": "标签八"
}
]
}, {
"id": "2",
"title": "标题",
"content": "内容",
"city": "城市",
"adrs": "地址描述",
"room": "文字描述",
"imgUrl": "图片地址 ",
"dataTimes": "日期",
"peo": "姓名",
"tel": "手机号",
"pho": "img的src地址",
"money": "总价格",
"unitprice": "单价",
"state": "状态",
"gender": "性别",
"tag": [
{
"tags": "标签一"
},
{
"tags": "标签七"
},
{
"tags": "标签八"
}
]
}
]
}
没筛选前
筛选效果
排序
