前端开发实现的前台分页、搜索功能
技术类型vue
请求的数据格式
父组件的代码
< script>
import axios from 'axios'
import date from '@/utils/date.js'
import Search from '../compontents/Search'
import Pagination from '../compontents/Pagination'
export default {
name: 'history' ,
data ( ) {
return {
tableData: [ ] ,
currentPageData: [ ] ,
total: 0 ,
CurrentPage: 1 ,
PageSize: 10 ,
PlaceholderTxt: '请输入浏览器名称或项目名称'
}
} ,
components: {
Pagination,
Search
} ,
methods: {
getDataList ( ) {
axios. get ( '请求地址' )
. then ( this . handleGetDataListSucc)
} ,
handleGetDataListSucc ( res) {
res = res. data
if ( res. code === 200 && res. object. data) {
this . tableData = res. object. data. recordList
this . total = this . tableData. length
this . currentPageData = this . tableData. slice ( 0 , 10 )
}
} ,
handlerInputChange ( value) {
let filterData = this . tableData. filter ( item => item. projectName. indexOf ( value) !== - 1 || item. value. companyNameCN. indexOf ( value) !== - 1 )
this . currentPageData = filterData
this . total = filterData. length
this . CurrentPage = 1
} ,
formatterTableTime ( time) {
return date. format ( time, 'yyyy-MM-dd hh:mm:ss' )
} ,
handlerCurrentChange ( value) {
this . CurrentPage = value
let start = ( value - 1 ) * 10
let end = value * 10
this . currentPageData = this . tableData. slice ( start, end)
}
} ,
mounted ( ) {
this . getDataList ( )
}
}
< / script>
搜索框组件代码
< template>
< div class = "Search" >
< el- input
: placeholder= "PlaceholderTxt"
clearable
@change= "InputValueChange"
v- model= "InputValue"
>
< el- button
slot= "append"
icon= "el-icon-search"
@click= "InputValueChange"
> < / el- button>
< / el- input>
< / div>
< / template>
< script>
export default {
name: 'Search' ,
props: {
PlaceholderTxt: {
type: String,
default : '请输入内容'
}
} ,
data ( ) {
return {
InputValue: ''
}
} ,
methods: {
InputValueChange ( ) {
this . $emit ( 'InputChange' , this . InputValue)
}
}
}
< / script>
< style lang= "less" scoped>
< / style>
分页组件代码
< template>
< div class = "Pagination" >
< el- pagination
background
layout= "prev, pager, next"
: page- size= "PageSize"
: hide- on- single- page= "true"
: total= "total"
: current- page= "CurrentPage"
@current- change= "CurrentChange"
>
< / el- pagination>
< / div>
< / template>
< script>
export default {
name: 'Pagination' ,
props: {
total: Number,
CurrentPage: Number,
PageSize: Number
} ,
methods: {
CurrentChange ( e) {
this . $emit ( 'CurrentChange' , e)
}
}
}
< / script>
< style lang= "less" scoped>
< / style>