前端开发实现的前台分页、搜索功能

技术类型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: '请输入浏览器名称或项目名称'  // 输入框的默认placeholder
    }
  },
  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>

原文链接：https://blog.csdn.net/weixin_39893889/article/details/103805026

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。