使用Ant Desigen在vue里面实现分页以及表头的模糊查询

一：分页

这次使用的是后端查来的数据在前端进行分页操作：

1.1：

data里面的定义

tab1pagination: {
                    defaultPageSize: 10,
                    defaultCurrent:1,
                    pageSize: 10,
                    current:1,
                    // size:"small",
                    showSizeChanger: true,
                    pageSizeOptions: ['10', '20', '30', '40'],
                    total: 0,
                    onShowSizeChange: (current, pageSize) => {
                        this.tab1pagination.current = current;
                        this.tab1pagination.pageSize = pageSize;
                        this.overlaycomplete(); //显示列表的接口名称
                    },
                    onChange: (current, pageSize) => {
                        this.tab1pagination.current = current;
                        this.tab1pagination.pageSize = pageSize;
                        this.overlaycomplete(); //显示列表的接口名称
                    },
                    showTotal: total => `共 ${total} 条数据`,
                },

这个接口名称一定是vue的方法而不是后台查询数据接口的方法

然后把你的数值传给data就好了，这样组件就会给你分页了

 二：表头的模糊查询

先定义一个方法：

在methods里面使用正则匹配，然后再把你匹配到的数值赋值给你的表格data

 searchTable() {
                let arr=[]
                let reg =  new RegExp(this.unitMsg);
                this.data.forEach((item,i)=>{
                    console.log("item",item)
                    if(reg.test(item.address)||reg.test(item.isp)||reg.test(item.id)){
                        arr.push(item)
                    }
                })
                console.log("arr",arr)
                this.data=arr
            },

这样就ok了