使用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了