vue 条件筛选 排序（二）

和 “vue页面传参$route 编辑 预览”  vue页面传参$route 编辑 预览 删除（一）_闲来无事垂钓的博客-CSDN博客 页面一样，只不过数据换成v-for 循环出来

html 部分

<!-- 筛选输入框 -->
<el-input class="int-1"  v-model='yName'  placeholder="请输入员工姓名"></el-input>
<!-- 数据列表 -->
<table class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition" cellpadding="0" cellspacing="0">
    <thead class="el-table__header" >
        <tr>
            <th style="width:100px;">ID</th>
            <th>标题</th>
            <th>姓名</th>
            <th>手机</th>
            <th>时间</th>
            <th>总价
                <span @click="orderFn('money', false)">↑</span>
                <span @click="orderFn('money', true)">↓</span>				
            </th>
            <th>头像</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody style="text-align: center;">
        <tr v-for="(item,i) in testpage2.slice((currentPage-1)*pagesize,currentPage*pagesize)" >
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.peo}}</td>
            <td>{{item.tel}}</td>
            <td>{{item.dataTimes}}</td>
            <td>{{item.money}}万</td>
            <td><p class="pic"><img :src="item.pho" /></p></td>
            <td>	
                <el-button size="mini" type="success" class="yl-sty"><i class="el-icon-search"></i>预览</el-button>				
                <el-button size="mini" type="primary" v-model="msg" @click="xiugai(i)"><i class="el-icon-edit"></i>修改
                </el-button>	
                <el-button size="mini" type="danger"  @click="deleteRow(i,testpage)"><i class="el-icon-delete"></i>删除</el-button>
            </td>		
        </tr>
    </tbody>
</table>
<!-- 这部分是分页 -->		
<div class="yema">
	<el-pagination background
		@size-change="handleSizeChange" 
		@current-change="handleCurrentChange"  
		:current-page="currentPage"  
		:page-sizes="[5,10,15]"
		:page-size="pagesize"   
		layout="total,jumper,prev, pager, next,sizes"
		:total="testpage2.length" >
	</el-pagination>
</div>
<!-- 这部分是分页 End-->

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<this.testpage.length;i++){
            //for循环数据中的每一项（根据姓名值搜）
                if(this.testpage[i].peo.search(this.yName) != -1){
                //判断输入框中的值是否可以匹配到数据，如果匹配成功
                    arrByZM.push(this.testpage[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": "标签八"
        }
      ]
    }

  ]
}

没筛选前

筛选效果

排序